كيف تتقن / تنتظر بناء الجملة: مثال حقيقي

إليكم ترجمة لمقال أدريان هاجدين ، الذي نشر على موقع freeCodeCamp. تحت القطة ، يشرح المؤلف بوضوح وإيجاز ميزة عدم التزامن / الانتظار ، ويظهر على مثال ملموس كيفية استخدام بناء الجملة هذا.



ملاحظة ...

أنا لم أكتب هذا المقال فقط ، لكني أنشأت أيضًا مقطع فيديو على YouTube!

يمكنك اتباع الإرشادات الموجودة في الفيديو والبرنامج أثناء المشاهدة. أنصحك بقراءة المقالة أولاً ثم كتابة التعليمات البرمجية أثناء الفيديو فقط.

رابط الفيديو: تعلم المزامنة / انتظر في مشروع هذا العالم الحقيقي

مقدمة

Async / await هي طريقة جديدة لكتابة التعليمات البرمجية غير المتزامنة. بناء الجملة هذا مبني على أعلى الوعود وبالتالي فهو لا يحجب.

الفرق من الطرق الأخرى لإنشاء كود غير متزامن هو أنه في المظهر والسلوك ، تشبه التعليمات البرمجية غير المتزامنة التي يتم تنفيذها من خلال async / await الكود المتزامن. وهذه هي مصلحته.

كانت الطرق السابقة لتنظيم التعليمات البرمجية غير المتزامنة هي عمليات الاسترجاعات والوعود.

وظائف رد الاتصال في العمل

setTimeout(() => { console.log('This runs after 1000 milliseconds.'); }, 1000); 

مشكلة وظيفة رد الاتصال - رد الاتصال الجحيم سيئة السمعة

عند إرفاق وظائف رد الاتصال مع بعضها البعض ، يبدأ الرمز في الظهور قريبًا كما يلي:


رد الجحيم

رد الجحيم

هذا هو الموقف الذي يتم فيه تضمين عمليات الاسترجاعات في عمليات الاسترجاعات الأخرى على عدة مستويات ، مما يجعل من الصعب فهم التعليمات البرمجية وإدارتها.

وعود في العمل

 const promiseFunction = new Promise((resolve, reject) => { const add = (a, b) => a + b; resolve(add(2, 2)); }); promiseFunction.then((response) => { console.log(response); }).catch((error) => { console.log(error); }); 

تقوم دالة الوعد بإرجاع الوعد الذي يمثل عملية هذه الوظيفة. تجعل وظيفة العزم أن يتعرف كائن وعد على اكتمال العملية.

ثم يمكننا استدعاء .then () و .catch () لوظيفة الوعد هذه:
ثم - يطلق رد الاتصال الذي تمرره عند اكتمال الوعد.
قبض - يطلق رد الاتصال الذي تمرره عندما يحدث خطأ ما.

وظائف المتزامن

تزودنا وظائف المزامنة بصيغة نظيفة ودقيقة تتيح لنا كتابة تعليمات برمجية أقل والحصول على نفس النتيجة عند استخدام الوعود. Async ليس سوى السكر النحوي للوعود.

يتم إنشاء وظائف Async عن طريق إضافة الكلمة الأساسية غير المتزامنة قبل إعلان الوظيفة ، على سبيل المثال:

 const asyncFunction = async () => { // Code } 

يمكن إيقاف الوظائف غير المتزامنة مع انتظار ، وهي كلمة أساسية يتم استخدامها فقط داخل وظيفة المزامنة . إرجاع Await كل ما ترجع الدالة async عند تنفيذه.

الفرق بين الوعود و المزامنة / الانتظار:

 // Async/Await const asyncGreeting = async () => 'Greetings'; // Promises const promiseGreeting = () => new Promise(((resolve) => { resolve('Greetings'); })); asyncGreeting().then(result => console.log(result)); promiseGreeting().then(result => console.log(result)); 

يشبه المزامنة / الانتظار رمزًا متزامنًا ، وهو أسهل بكثير في الفهم.

الآن وقد غطينا المبادئ الأساسية ، دعنا ننتقل إلى حالة الاستخدام الحقيقي!

محول العملات

مشروع التوضيح والتخصيص

الآن سنقوم ببناء تطبيق بسيط ولكنه مفيد (بما في ذلك للتدريب) من شأنه تحسين معرفتك العامة بالمتزامن / الانتظار .

سيأخذ البرنامج مبلغ المال ، ورمز العملة الذي نريد تحويل هذا المبلغ منه ، ورمز العملة الذي نريد تحويله إلى ذلك. سيقوم البرنامج بعد ذلك بإصدار سعر الصرف الصحيح بناءً على البيانات من API.

في هذا التطبيق ، سنحصل على بيانات من مصدرين غير متزامنين:

1. طبقة العملة - https://currencylayer.com - ستحتاج إلى التسجيل مجانًا لاستخدام مفتاح الوصول إلى واجهة برمجة التطبيقات. سوف يزودنا بالبيانات اللازمة لحساب سعر الصرف.
2. ستوفر بقية البلدان - http://restcountries.eu/ - واجهة برمجة التطبيقات هذه معلومات حول أين يمكننا استخدام العملة التي قمنا بتحويل أموالنا إليها للتو.

بادئ ذي بدء ، قم بإنشاء مجلد جديد وتشغيل npm init ، وتخطي جميع الخطوات وتثبيت axios بكتابة npm i -- save axios . قم بإنشاء ملف جديد يسمى currency-converter.js .

طلب axios الأول عن طريق الكتابة: const axios = require('axios');

دعونا الغوص في المزامنة / ننتظر

هدفنا هو أن يكون للبرنامج ثلاث وظائف. ليست واحدة أو اثنتين ، ولكن ثلاث وظائف غير متزامن . ستتلقى الوظيفة الأولى بيانات عن العملات ، والثانية - حول البلدان ، والثالثة - لجمع هذه المعلومات في مكان واحد وعرضها على المستخدم بطريقة مرتبة.

الوظيفة الأولى هي الإيصال غير المتزامن لبيانات العملة

سنقوم بإنشاء دالة غير متزامنة تتضمن وسيطين - من العملة إلى العملة.

 const getExchangeRate = async (fromCurrency, toCurrency) => {} 

الآن تحتاج إلى الحصول على البيانات. باستخدام المزامنة / الانتظار ، يمكنك تعيين البيانات مباشرة إلى متغير. لا تنسَ التسجيل وإدخال مفتاح المرور الخاص بك.

 const getExchangeRate = async (fromCurrency, toCurrency) => { const response = await axios.get('http://data.fixer.io/api/latest? access_key=[yourAccessKey]&format=1'); } 

تتوفر البيانات من الاستجابة في response.data.rates ، بحيث يمكنك إدراج هذا التعبير في متغير أسفل الاستجابة مباشرة:

 const rate = response.data.rates; 

نظرًا لأن كل شيء يتم تحويله من اليورو ، فسنقوم أدناه بإنشاء متغير يسمى اليورو ، والذي يساوي 1 / من العملة التي نريد تحويل الأموال منها:

 const euro = 1 / rate[fromCurrency]; 

وللحصول على سعر الصرف ، تحتاج إلى ضرب اليورو بالعملة التي نريد تحويل الأموال إليها:

 const exchangeRate = euro * rate[toCurrency]; 

نتيجة لذلك ، يجب أن تبدو الوظيفة بشيء من هذا القبيل:



الوظيفة الثانية هي الحصول غير المتزامن على بيانات حول البلد.

سننشئ وظيفة غير متزامنة تستخدم كود العملة كوسيطة:

 const getCountries = async (currencyCode) => {} 

مثل آخر مرة ، سوف نحصل على البيانات ونخصصها لمتغير:

 const response = await axios.get(`https://restcountries.eu/rest/v2/currency/${currencyCode}`); 

ثم سنطابق البيانات country.name لكل رمز عملة:

 return response.data.map(country => country.name); 

نتيجة لذلك ، يجب أن تبدو الوظيفة بشيء من هذا القبيل:



الوظيفة الثالثة والأخيرة - نجمع كل شيء معًا
سننشئ وظيفة غير متزامنة تشمل fromCurrency و toCurrency والمبلغ كوسيطات :

 const convert = async (fromCurrency, toCurrency, amount) => {} 

أولاً نحصل على بيانات العملة:

 const exchangeRate = await getExchangeRate(fromCurrency, toCurrency); 

ثم بيانات الدولة:

 const countries = await getCountries(toCurrency); 

بعد ذلك ، احفظ الكمية المحولة إلى متغير:

 const convertedAmount = (amount * exchangeRate).toFixed(2); 

نتيجة لذلك ، نعرض كل هذا للمستخدم:

 return `${amount} ${fromCurrency} is worth ${convertedAmount} ${toCurrency}. You can spend these in the following countries: ${countries}`; 

معًا ، يجب أن يبدو كالتالي:



إضافة عبارة try / catch للتعامل مع الأخطاء
نحن بحاجة إلى التفاف منطقنا مع كتلة try / catch للقبض على الأخطاء ، إن وجدت:

 const getExchangeRate = async (fromCurrency, toCurrency) => { try { const response = await axios.get('http://data.fixer.io/api/latest?access_key=f68b13604ac8e570a00f7d8fe7f25e1b&format=1'); const rate = response.data.rates; const euro = 1 / rate[fromCurrency]; const exchangeRate = euro * rate[toCurrency]; return exchangeRate; } catch (error) { throw new Error(`Unable to get currency ${fromCurrency} and ${toCurrency}`); } }; 

تفعل الشيء نفسه مع الوظيفة الثانية:

 const getCountries = async (currencyCode) => { try { const response = await axios.get(`https://restcountries.eu/rest/v2/currency/${currencyCode}`); return response.data.map(country => country.name); } catch (error) { throw new Error(`Unable to get countries that use ${currencyCode}`); } }; 

ليست هناك حاجة للتحقق من الوظيفة الثالثة بحثًا عن الأخطاء ، حيث إنها تعمل مع البيانات التي توفرها الدالتان الأولى والثانية لها.

نتيجة لذلك ، يمكننا استدعاء الوظيفة والحصول على البيانات:

 convertCurrency('USD', 'HRK', 20) .then((message) => { console.log(message); }).catch((error) => { console.log(error.message); }); 

النتيجة التي تحصل عليها:

هذا كل شئ!

لقد وصلنا إلى النهاية! إذا لم ينجح شيء ما في هذه العملية ، يمكنك العثور على الكود المصدري في هذا المستودع . إذا كانت لديك أسئلة أو تريد ترك تعليق ، اكتب تعليقًا . بالنسبة لي ، سيكون أكبر دعم لك هو دعمك على YouTube ، لأنني قمت مؤخرًا بإنشاء قناة هناك! انقر هنا - قريباً سوف تظهر هنا الكثير من الأشياء المثيرة للاهتمام! :)

يمكنك أيضًا مشاهدة البرنامج التعليمي الذي قمت بإنشائه على موقع Mongoose .