🍗 ✍🏽 📿 हम वास्तविक उदाहरण पर async / प्रतीक्षा करते हैं 👄 👕 🎶

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

Async / प्रतीक्षा के आगमन से पहले, अतुल्यकालिक कार्यक्रम तंत्र के विकास में कॉलबैक और वादों का उपयोग किया गया था। सामग्री का लेखक, जिसका अनुवाद आज हम प्रकाशित करते हैं, पहले यह याद दिलाता है कि पुराने तरीके से कोड कैसे लिखना है, और फिर, एक वास्तविक उदाहरण का उपयोग करके, एसिंक्स / वेट के उपयोग का अध्ययन करें।

कॉलबैक

यहाँ एक नमूना कोड है जो कॉलबैक (कॉलबैक फ़ंक्शन) का उपयोग करता है:

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

नेस्टेड कॉलबैक फ़ंक्शन का उपयोग करते समय, कॉलबैक नरक नामक एक समस्या होती है। इस समस्या का वर्णन करने के लिए एक सरल कोड उदाहरण है:

 asyncCallOne(() => { asyncCallTwo(() => {   asyncCallThree(() => {     asyncCallFour(() => {       asyncCallFive(() => {         //         })     })   }) }) })

यदि कोड में संरचनाएं होती हैं, जिसमें कॉलबैक एक दूसरे में निहित होते हैं, तो ऐसे कोड को समझना मुश्किल हो सकता है, इसे बनाए रखना मुश्किल होगा।

वादा

यहाँ एक उदाहरण कोड है जो वादों का उपयोग करता है (वादे की वस्तुएं):

 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); });

इस उदाहरण से promiseFunction() फ़ंक्शन Promise ऑब्जेक्ट देता है, जो फ़ंक्शन द्वारा निष्पादित एक निश्चित कार्रवाई है। resolve() विधि के लिए एक कॉल इस वादे को इंगित करता है कि इसका संचालन सफलतापूर्वक पूरा हुआ। ऐसे निर्माणों में, .then() वादों का तरीका भी प्रयोग किया जाता है - इसकी मदद से, वादे को सफलतापूर्वक हल करने के बाद, आप एक निश्चित कॉलबैक निष्पादित कर सकते हैं। .catch() विधि को कहा जाता है यदि वादे के कार्य के दौरान कुछ गलत हुआ।

अतुल्यकालिक कार्य

async (एसिंक्रोनस फ़ंक्शंस) का उपयोग करके घोषित किए गए फ़ंक्शंस हमें कोड लिखने का अवसर प्रदान करते हैं जो कि साफ-सुथरा होता है और सर्विस कंस्ट्रक्शन के साथ अतिभारित नहीं होता है, जो हमें वादों का उपयोग करके प्राप्त किए गए समान परिणाम प्राप्त करने की अनुमति देता है। यह ध्यान दिया जाना चाहिए कि वादों के लिए async अनिवार्य रूप से सिर्फ "सिंटैक्टिक शुगर" है।

फ़ंक्शन की घोषणा करते समय एसिंक्रोनस फ़ंक्शन का उपयोग करके एसिंक्रोनस फ़ंक्शन बनाए जाते हैं। यह इस तरह दिखता है:

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

अतुल्यकालिक कार्यों को await कीवर्ड का उपयोग करके रोका जा सकता है। इसका उपयोग केवल अतुल्यकालिक कार्यों में किया जा सकता है। यह आपको अतुल्यकालिक फ़ंक्शन के परिणाम को वापस करने की अनुमति देता है, जो कि इस तरह के फ़ंक्शन के बाद किसी कार्य को पूरा करने के बाद उपलब्ध होगा।

एक एसिंक्रोनस फ़ंक्शन के संचालन और एक वादे की तुलना करें जो एक स्ट्रिंग लौटाते हैं:

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

यह देखना आसान है कि async का उपयोग करने से आप एसिंक्रोनस कोड लिख सकते हैं जो सिंक्रोनस जैसा दिखता है। इस कोड के साथ काम करना बहुत आसान है।

अब जब हमने बुनियादी चीजों को कवर कर लिया है, तो चलिए अपने उदाहरण पर चलते हैं।

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

▍ प्रारंभिक तैयारी

यहां हम एसिंक्स / वेट एप्लिकेशन के निर्माण का अध्ययन करने के दृष्टिकोण से एक सरल, लेकिन संज्ञानात्मक बनाएंगे। यह एक मुद्रा परिवर्तक है जो संबंधित एपीआई से प्राप्त वास्तविक डेटा का उपयोग करता है। कार्यक्रम एक निश्चित मुद्रा में, इस मुद्रा के कोड के साथ-साथ उस मुद्रा कोड को स्वीकार करता है जिसमें हम इस राशि को परिवर्तित करना चाहते हैं। उसके बाद, प्रोग्राम पहले एक्सचेंज दरों पर वर्तमान डेटा डाउनलोड करके परिणाम प्रदर्शित करता है। कार्यक्रम उन देशों की एक सूची भी प्रदर्शित करता है जिसमें आप उस मुद्रा में पैसा खर्च कर सकते हैं जिसमें निर्दिष्ट राशि स्थानांतरित की जाती है।

विशेष रूप से, यहां हम सूचना के दो अतुल्यकालिक स्रोतों से डेटा का उपयोग करने जा रहे हैं:

Currencylayer.com सेवा। इस साइट पर आपको एक मुफ्त खाता बनाने और एपीआई (एपीआई एक्सेस कुंजी) तक पहुंचने के लिए एक कुंजी प्राप्त करने की आवश्यकता होगी। यहां से हम एक मुद्रा से दूसरी मुद्रा में राशि के रूपांतरण के लिए आवश्यक डेटा लेंगे।
सेवा restcountries.eu । इसका उपयोग बिना पंजीकरण के किया जा सकता है। यहां से हम डेटा अपलोड करते हैं जहां आप उस मुद्रा का उपयोग कर सकते हैं जिसमें हमने निर्दिष्ट राशि को धन में परिवर्तित किया है।

एक नई निर्देशिका बनाएं और इसमें npm init कमांड चलाएं। जब प्रोग्राम हमसे पैकेज के नाम के बारे में एक सवाल पूछता है, तो हम currency-converter पेश करेंगे। आप जवाब में Enter दबाकर कार्यक्रम के अन्य सवालों के जवाब नहीं दे सकते। उसके बाद, हमारी निर्देशिका में npm install axios --save कमांड चलाकर हमारे प्रोजेक्ट में Axios पैकेज स्थापित करें। currency-converter.js नामक एक नई फ़ाइल बनाएँ।

आइए इस फाइल में Axios को जोड़कर प्रोग्राम कोड लिखना शुरू करें:

 const axios = require('axios');

हमारी परियोजना में तीन अतुल्यकालिक कार्य होंगे। पहला मुद्रा डेटा लोड करेगा। दूसरा देश का डेटा लोड करेगा। तीसरा इस डेटा को एकत्रित करेगा, इसे उपयोगकर्ता के अनुकूल रूप में प्रस्तुत करेगा और इसे स्क्रीन पर प्रदर्शित करेगा।

Of पहला कार्य मुद्रा डेटा की अतुल्यकालिक लोडिंग है

आइए एक अतुल्यकालिक getExchangeRate() फ़ंक्शन बनाएं जो दो तर्क देगा: fromCurrency और toCurrency :

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

इस फ़ंक्शन में हमें डेटा लोड करने की आवश्यकता होती है। Async / प्रतीक्षा निर्माण का उपयोग करके, आप प्राप्त डेटा को एक निश्चित चर या निरंतर पर सीधे लिख सकते हैं। इस फ़ंक्शन के लिए कोड लिखने से पहले, साइट पर पंजीकरण करना और एपीआई एक्सेस कुंजी प्राप्त करना न भूलें। डेटा लोड करने के लिए, हमें निम्नलिखित निर्माण की आवश्यकता है:

 const response = await axios.get('http://www.apilayer.net/api/live?access_key=[    API]');

सिस्टम प्रतिक्रिया प्राप्त करने के बाद, हमें जो डेटा चाहिए वह response पर response.data.quotes ऑब्जेक्ट में मिल सकता है। हमारे लिए ब्याज के डेटा के साथ वस्तु का टुकड़ा है (यह response.data रूप में कार्यक्रम में दिखाई दे रहा है):

 {  "success":true,  "terms":"https:\/\/currencylayer.com\/terms",  "privacy":"https:\/\/currencylayer.com\/privacy",  "timestamp":1547891348,  "source":"USD",  "quotes":{     "USDAED":3.673042,     "USDAFN":75.350404,     "USDALL":109.203989, ...     "USDZWL":322.355011  } }

वस्तु को स्थिर rate में विनिमय दर के साथ रखें:

 const rate = response.data.quotes;

आधार मुद्रा कोड response.data.source पर पाया जा सकता है। हम निरंतर आधार में आधार मुद्रा का कोड baseCurrency :

 const baseCurrency = response.data.source;

चूंकि, डिफ़ॉल्ट रूप से, इस एपीआई द्वारा लौटाया गया डेटा अमेरिकी डॉलर (यूएसडी) के खिलाफ विनिमय दर है, एक निरंतर usd बनाएं जिसमें हम विनिमय दर द्वारा 1 को विभाजित करने का परिणाम लिखेंगे जिसमें राशि निर्दिष्ट की गई है:

 const usd = 1 / rate[`${baseCurrency}${fromCurrency}`];

कुंजी कैसे बनती है, इस पर ध्यान दें, जिसके अनुसार हमें पाठ्यक्रम का मूल्य मिलता है। एपीआई से प्राप्त वस्तु में, जिसका टुकड़ा ऊपर दिया गया है, चाबियाँ USD साथ शुरू होती हैं और इसी मुद्रा के कोड के साथ समाप्त होती हैं। चूँकि यह माना जाता है कि हमारा प्रोग्राम स्ट्रिंग मुद्रा कोड स्वीकार करता है, हम आधार मुद्रा कोड युक्त स्ट्रिंग को fromCurrency कर एक कुंजी उत्पन्न करते हैं और जो कि fromCurrency पैरामीटर में फ़ंक्शन को पास किया fromCurrency है।

अब, विनिमय दर को toCurrence से fromCurrency करने के लिए, हम fromCurrency लिए दर से निरंतर usd को गुणा करते हैं। यह इस तरह दिखता है:

 const exchangeRate = usd * rate[`${baseCurrency}${toCurrency}`];

नतीजतन, हम वही करेंगे जो exchangeRate में मिलेगा। यहाँ इसका पूरा कोड कैसा दिखता है:

 const getExchangeRate = async (fromCurrency, toCurrency) => {   try {     const response = await axios.get('http://www.apilayer.net/api/live?access_key=[    API]');     const rate = response.data.quotes;     const baseCurrency = response.data.source;     const usd = 1 / rate[`${baseCurrency}${fromCurrency}`];     const exchangeRate = usd * rate[`${baseCurrency}${toCurrency}`];     return exchangeRate;   } catch (error) {     throw new Error(`Unable to get currency ${fromCurrency} and ${toCurrency}`);   } };

कृपया ध्यान दें कि क्वेरी के निष्पादन के दौरान होने वाली त्रुटियों को संभालने के लिए नियमित प्रयास / कैच निर्माण का उपयोग किया जाता है।

Data दूसरा कार्य देश के डेटा का अतुल्यकालिक लोडिंग है

हमारा दूसरा कार्य, getCountries() , जो अतुल्यकालिक रूप से उन देशों के बारे में जानकारी को लोड करता है जिसमें आप उस मुद्रा का उपयोग कर सकते हैं जिसमें हम किसी अन्य मुद्रा में निर्दिष्ट राशि को परिवर्तित करेंगे, getCountries() तर्क को ले जाएगा:

 const getCountries = async (currencyCode) => {}

डेटा लोड करने के लिए, हम निम्नलिखित कमांड का उपयोग करते हैं:

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

यदि, उदाहरण के लिए, हम अनुरोध में HRK (क्रोएशियाई कुना) कोड का उपयोग करते हैं, तो हमें प्रतिक्रिया में JSON कोड प्राप्त होगा, जिसका एक टुकड़ा नीचे दिखाया गया है:

 [   {     "name":"Croatia", ...  } ]

यह देशों के बारे में जानकारी के साथ वस्तुओं की एक सरणी है। इन वस्तुओं के name गुणों में देश का नाम शामिल है। आप इस सरणी को response.data निर्माण का उपयोग करके एक्सेस कर सकते हैं। हम प्राप्त आंकड़ों से देशों के नाम निकालने के लिए map() सरणी विधि लागू करते हैं और इस डेटा को getCountries() फ़ंक्शन से वापस करते हैं, जो देश के नामों की एक सरणी होगी:

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

यहाँ पूर्ण getCountries() फ़ंक्शन कोड है:

 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}`);   } };

HThird फ़ंक्शन - डेटा संग्रह और आउटपुट

हमारा तीसरा अतुल्यकालिक कार्य, convertCurrency () , तर्क से स्वीकार कर fromCurrency toCurrency और amount - मुद्रा कोड और राशि।

 const convertCurrency = 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 convertCurrency = 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}`; };

कृपया ध्यान दें कि इस फ़ंक्शन में एक कोशिश / कैच ब्लॉक नहीं है, क्योंकि यह केवल दो पहले वर्णित कार्यों द्वारा प्रदान किए गए परिणामों के साथ काम करता है।

कार्यक्रम शुरू करें

हमने तीन फ़ंक्शन तैयार किए हैं, जिनमें से दो विभिन्न सेवाओं से डेटा लोड करते हैं, और एक इस डेटा को इकट्ठा करता है और आउटपुट के लिए तैयार करता है। अब हमें केवल इस फ़ंक्शन को कॉल करने की आवश्यकता है, इसे हमारी ज़रूरत की हर चीज़ को पास करते हुए। हम यहां उन तंत्रों को लागू नहीं करेंगे जो मुद्रा के हस्तांतरण के साथ कमांड लाइन से हमारे कार्यक्रम को कॉल करने की अनुमति देते हैं और इसके लिए योग कोड हैं, हालांकि आप चाहें तो ऐसा कर सकते हैं। हम सिर्फ convertCurrency() फ़ंक्शन को कॉल करते हैं, इसे आवश्यक डेटा पास करते हैं:

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

यहां हम यह पता लगाना चाहते हैं कि 20 यूरो के लिए क्रोएशियाई कुना का कितना आदान-प्रदान किया जा सकता है और यह पता लगाने के तरीके के साथ कि यह पैसा किन देशों में खर्च किया जा सकता है।

हम टर्मिनल में निम्नलिखित कमांड दर्ज करके प्रोग्राम को कॉल करते हैं:

 node currency-converter.js

जवाब में, हम निम्नलिखित के बारे में प्राप्त करते हैं।

कार्यक्रम का परिणाम

यहाँ, बस मामले में, हमारी परियोजना का पूरा कोड।

 const axios = require('axios'); const getExchangeRate = async (fromCurrency, toCurrency) => {   try {     const response = await axios.get('http://www.apilayer.net/api/live?access_key=[    API]');     const rate = response.data.quotes;     const baseCurrency = response.data.source;     const usd = 1 / rate[`${baseCurrency}${fromCurrency}`];     const exchangeRate = usd * rate[`${baseCurrency}${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}`);   } }; const convertCurrency = 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}`; }; convertCurrency('EUR', 'HRK', 20)   .then((message) => {     console.log(message);   }).catch((error) => {     console.log(error.message);   });

परिणाम

हम आशा करते हैं कि वास्तविक स्थितियों में एसिंक्स / प्रतीक्षित निर्माण का उपयोग करने का यह उदाहरण उन लोगों की मदद करता है जो इस निर्माण को समझने से पहले समझ नहीं पाए।

प्रिय पाठकों! यदि आप अभ्यास में async / प्रतीक्षा निर्माण का उपयोग करते हैं, तो कृपया इसके बारे में अपने इंप्रेशन साझा करें।

हम वास्तविक उदाहरण पर async / प्रतीक्षा करते हैं