🐰 👩‍👩‍👧 😊 कैसे async / वेट सिंटैक्स मास्टर करने के लिए: एक वास्तविक उदाहरण 🛡️ 😎 🌰

यहाँ एड्रियन हाज़िन के एक लेख का अनुवाद है, जिसे फ्रीकोडकैंप वेबसाइट पर प्रकाशित किया गया था। बिल्ली के नीचे, लेखक स्पष्ट रूप से और संक्षिप्त रूप से async / प्रतीक्षा के लाभ की व्याख्या करता है, और एक ठोस उदाहरण पर दिखाता है कि इस सिंटैक्स का उपयोग कैसे किया जाए।

ध्यान दें ...

मैंने न केवल इस लेख को लिखा, बल्कि YouTube पर एक वीडियो भी बनाया!

आप वीडियो और कार्यक्रम को देखते हुए निर्देशों का पालन कर सकते हैं। मैं आपको सलाह देता हूं कि पहले लेख पढ़ें और उसके बाद ही वीडियो के दौरान कोड लिखें।

वीडियो लिंक: इस वास्तविक विश्व परियोजना में Async / Await जानें

परिचय

एसिंक्रोनस कोड लिखने के लिए एक नया तरीका है Async / इंतजार। यह सिंटेक्स वादों के ऊपर बनाया गया है और इसलिए ब्लॉक नहीं हो रहा है।

एसिंक्रोनस कोड बनाने के अन्य तरीकों से अंतर यह है कि उपस्थिति और व्यवहार में, एसिंक्रोनस कोड जो async / wait के माध्यम से कार्यान्वित किया जाता है वह सिंक्रोनस कोड जैसा दिखता है। और यही उसका फायदा है।

अतुल्यकालिक कोड को व्यवस्थित करने के लिए पिछले तरीके कॉलबैक और वादे थे।

कार्रवाई में कॉलबैक कार्य

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 फ़ंक्शन हमें एक साफ और संक्षिप्त सिंटैक्स प्रदान करता है जो हमें कम कोड लिखने और वादों का उपयोग करने के समान परिणाम प्राप्त करने की अनुमति देता है। Async वादों के लिए सिंटैक्टिक शुगर के अलावा कुछ नहीं है।

Async फ़ंक्शन फ़ंक्शन घोषणा से पहले async कीवर्ड जोड़कर बनाए जाते हैं, उदाहरण के लिए:

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

अतुल्यकालिक कार्यों को प्रतीक्षा के साथ रोका जा सकता है, एक कीवर्ड जो केवल async फ़ंक्शन के भीतर उपयोग किया जाता है । प्रतीक्षित सब कुछ है कि async फ़ंक्शन देता है जब इसे निष्पादित किया जाता है।

वादे और 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));

Async / wait सिंक्रोनस कोड की तरह है, जिसे समझना बहुत आसान है।

अब जब हमने मूल सिद्धांतों को कवर कर लिया है, तो चलिए एक वास्तविक उपयोग के मामले पर चलते हैं!

मुद्रा परिवर्तक

परियोजना स्पष्टीकरण और अनुकूलन

अब हम एक सरल लेकिन उपयोगी (प्रशिक्षण के लिए सहित) एप्लिकेशन का निर्माण करेंगे, जो आपके एएसक्यूएन / प्रतीक्षा के सामान्य ज्ञान में सुधार करेगा।

कार्यक्रम धन की राशि लेगा, जिस मुद्रा कोड से हम इस राशि को स्थानांतरित करना चाहते हैं, और जिस मुद्रा कोड में हम इसे स्थानांतरित करना चाहते हैं। प्रोग्राम तब एपीआई से डेटा के आधार पर सही विनिमय दर जारी करेगा।

इस एप्लिकेशन में, हम दो अतुल्यकालिक स्रोतों से डेटा प्राप्त करने जा रहे हैं:

मुद्रा परत - https://currencylayer.com - आपको एपीआई एक्सेस कुंजी का उपयोग करने के लिए मुफ्त में पंजीकरण करना होगा। वह हमें विनिमय दर की गणना करने के लिए आवश्यक डेटा प्रदान करेगा।
बाकी देशों - http://restcountries.eu/ - यह एपीआई जानकारी प्रदान करेगा कि हम उस मुद्रा का उपयोग कहां कर सकते हैं जिसमें हमने अभी-अभी अपना धन हस्तांतरित किया है।

सबसे पहले, एक नया फ़ोल्डर बनाएं और npm init चलाएं, सभी चरणों को छोड़ दें और npm npm i -- save axios axios को लिखकर axios स्थापित करें। currency-converter.js नामक एक नई फ़ाइल बनाएँ।

टाइपिंग द्वारा पहला अनुरोध axios: const axios = require('axios');

चलो async / प्रतीक्षा में गोता लगाएँ

हमारा लक्ष्य कार्यक्रम के लिए तीन कार्य करना है। एक या दो नहीं, बल्कि तीन अतुल्यकालिक कार्य । पहला फ़ंक्शन मुद्राओं पर डेटा प्राप्त करेगा, दूसरा - देशों के बारे में, और तीसरा - इस जानकारी को एक स्थान पर एकत्र करने और इसे उपयोगकर्ता को एक क्रमबद्ध तरीके से प्रदर्शित करने के लिए।

पहला कार्य मुद्रा डेटा की अतुल्यकालिक रसीद है

हम एक एसिंक्रोनस फ़ंक्शन बनाएंगे जिसमें दो तर्क शामिल होंगे - fromCurrency और toCurrency।

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

अब आपको डेटा प्राप्त करने की आवश्यकता है। Async / प्रतीक्षा का उपयोग करते हुए, आप डेटा को सीधे एक चर में असाइन कर सकते हैं। अपना पासपोर्ट दर्ज करना और दर्ज करना न भूलें।

 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 मिलान करेंगे country.name

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

नतीजतन, फ़ंक्शन को कुछ इस तरह देखना चाहिए:

तीसरा और अंतिम कार्य - हम सब कुछ एक साथ जोड़ते हैं
हम एक असिंक्रोनस फ़ंक्शन बनाएंगे जिसमें शामिल होगा CCurrency , 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}`;

एक साथ, यह इस तरह दिखना चाहिए:

त्रुटियों को संभालने के लिए एक कोशिश / कैच स्टेटमेंट जोड़ना
हमें त्रुटियों को पकड़ने के लिए एक कोशिश / पकड़ ब्लॉक के साथ अपने तर्क को लपेटने की आवश्यकता है, यदि कोई हो:

 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 पर आपका समर्थन होगा, क्योंकि मैंने अभी हाल ही में वहां एक चैनल बनाया है! यहां क्लिक करें - जल्द ही यहां बहुत सारी दिलचस्प चीजें दिखाई देंगी! :)

आप मानगो वेबसाइट पर मेरे द्वारा बनाए गए ट्यूटोरियल को भी देख सकते हैं।

कैसे async / वेट सिंटैक्स मास्टर करने के लिए: एक वास्तविक उदाहरण