उदाहरण के साथ जावास्क्रिप्ट में Async / Await पार्सिंग

लेख के लेखक उदाहरणों का उपयोग करते हुए जावास्क्रिप्ट में Async / Await को पार्स करते हैं। सामान्य तौर पर, Async / Await एसिंक्रोनस कोड लिखने का एक सुविधाजनक तरीका है। इस अवसर से पहले, कॉलबैक और वादों का उपयोग करके समान कोड लिखा गया था। मूल लेख के लेखक ने विभिन्न उदाहरणों की जांच करके Async / Await के लाभों का खुलासा किया है।

हम आपको याद दिलाते हैं: "हैबर" के सभी पाठकों के लिए - "हैबर" प्रोमो कोड का उपयोग करके किसी भी स्किलबॉक्स कोर्स के लिए पंजीकरण करते समय 10,000 रूबल की छूट।

Skillbox अनुशंसा करता है: जावा डेवलपर ऑनलाइन शिक्षा पाठ्यक्रम।

कॉलबैक

कॉलबैक एक फ़ंक्शन है जिसका कॉल अनिश्चित काल के लिए विलंबित है। पहले, कोडबैक के उन हिस्सों में कॉलबैक का उपयोग किया जाता था, जहाँ परिणाम तुरंत प्राप्त नहीं किया जा सकता था।

यहाँ अतुल्यकालिक रूप से Node.js पर एक फ़ाइल पढ़ने का एक उदाहरण है:

fs.readFile(__filename, 'utf-8', (err, data) => { if (err) { throw err; } console.log(data); }); 

जब आप एक साथ कई अतुल्यकालिक ऑपरेशन करने की आवश्यकता होती है तो समस्याएं उत्पन्न होती हैं। आइए इस परिदृश्य की कल्पना करें: Arfat उपयोगकर्ता डेटाबेस के लिए एक अनुरोध किया गया है, आपको इसके profile_img_url फ़ील्ड को पढ़ने और someserver.com सर्वर से एक चित्र डाउनलोड करने की आवश्यकता है।
डाउनलोड करने के बाद, छवि को दूसरे प्रारूप में परिवर्तित करें, उदाहरण के लिए, पीएनजी से जेपीईजी तक। यदि रूपांतरण सफल था, तो उपयोगकर्ता के मेल पर एक ईमेल भेजा जाता है। इसके अलावा, घटना के बारे में तारीखों के साथ परिवर्तनों के बारे में जानकारी दर्ज की जाती है। फाइल।



यह कोड के अंतिम भाग में कॉलबैक और एक बड़ी संख्या} को थोपने पर ध्यान देने योग्य है। इसे कॉलबैक हेल या पिरामिड ऑफ डूम कहा जाता है।

इस विधि के नुकसान स्पष्ट हैं:

• इस कोड को पढ़ना मुश्किल है।
• इसमें त्रुटियों को संभालना भी मुश्किल है, जो अक्सर कोड की गुणवत्ता में गिरावट का कारण बनता है।

इस समस्या को हल करने के लिए, जावास्क्रिप्ट में वादे जोड़े गए थे। वे आपको .then शब्द के साथ कॉलबैक की गहरी नेस्टिंग को बदलने की अनुमति देते हैं।



वादों का सकारात्मक बिंदु यह था कि उनके साथ कोड बेहतर पढ़ा जाता है, ऊपर से नीचे तक, और बाएं से दाएं नहीं। फिर भी, वादों की भी अपनी समस्याएं हैं:

• .Then की एक बड़ी मात्रा को जोड़ने की आवश्यकता है।
• सभी त्रुटियों को संभालने के लिए .catch का उपयोग करने के बजाय .catch का उपयोग किया जाता है।
• एक चक्र के भीतर कई वादों के साथ काम करना हमेशा सुविधाजनक होता है, कुछ मामलों में, वे कोड को जटिल करते हैं।

यहां एक कार्य है जो अंतिम पैराग्राफ का अर्थ दिखाएगा।

मान लीजिए कि एक लूप है जो एक यादृच्छिक अंतराल (0 - n सेकंड) के साथ 0 से 10 तक की संख्याओं के अनुक्रम को प्रिंट करता है। वादों का उपयोग करते हुए, आपको इस चक्र को बदलने की आवश्यकता है ताकि संख्या 0 से 10 तक अनुक्रम में प्रदर्शित हो। इसलिए, यदि शून्य आउटपुट में 6 सेकंड लगते हैं और इकाइयों को 2 सेकंड लगते हैं, तो शून्य को पहले आउटपुट होना चाहिए, और फिर यूनिट आउटपुट काउंटडाउन शुरू हो जाएगा।

और हां, इस समस्या को हल करने के लिए, हम Async / Await या .sort का उपयोग नहीं करते हैं। एक समाधान का एक उदाहरण अंत में है।

Async कार्य करता है

ES2017 (ES8) में async फ़ंक्शंस जोड़ना वादों के साथ काम करने के कार्य को सरल बना दिया है। मैं ध्यान देता हूं कि async फ़ंक्शंस वादों के शीर्ष पर काम करते हैं। ये कार्य गुणात्मक रूप से विभिन्न अवधारणाओं का प्रतिनिधित्व नहीं करते हैं। कोड के विकल्प के रूप में Async फ़ंक्शन की कल्पना की गई थी जो वादों का उपयोग करता है।

Async / Await समकालिक शैली में अतुल्यकालिक कोड के साथ काम को व्यवस्थित करना संभव बनाता है।

इस प्रकार, वादों का ज्ञान Async / Await के सिद्धांतों को समझना आसान बनाता है।

वाक्य-विन्यास

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

 // With function declaration async function myFn() { // await ... } // With arrow function const myFn = async () => { // await ... } function myFn() { // await fn(); (Syntax Error since no async) } 

Async फ़ंक्शन घोषणा के बहुत शुरुआत में डाला जाता है, और तीर फ़ंक्शन के मामले में, "=" चिह्न और कोष्ठक के बीच।

इन कार्यों को एक वस्तु में विधियों के रूप में रखा जा सकता है या एक वर्ग घोषणा में उपयोग किया जा सकता है।

 // As an object's method const obj = { async getName() { return fetch('https://www.example.com'); } } // In a class class Obj { async getResource() { return fetch('https://www.example.com'); } } 

नायब! यह याद रखने योग्य है कि क्लास कंस्ट्रक्टर और गेटर्स / सेटर अतुल्यकालिक नहीं हो सकते हैं।

शब्दार्थ और निष्पादन के नियम

Async फ़ंक्शन मूल रूप से मानक JS फ़ंक्शन के समान हैं, लेकिन कुछ अपवाद भी हैं।

इसलिए, async फ़ंक्शंस हमेशा वादे वापस करते हैं:

 async function fn() { return 'hello'; } fn().then(console.log) // hello 

विशेष रूप से, fn स्ट्रिंग का हैलो लौटाता है। खैर, चूंकि यह एक अतुल्यकालिक फ़ंक्शन है, इसलिए स्ट्रिंग वैल्यू को कंस्ट्रक्टर का उपयोग करने के वादे में लपेटा गया है।

यहाँ Async के बिना एक वैकल्पिक डिजाइन है:

 function fn() { return Promise.resolve('hello'); } fn().then(console.log); // hello 

इस मामले में, वादे की वापसी "मैन्युअल रूप से" की जाती है। एक एसिंक्रोनस फ़ंक्शन हमेशा एक नए वादे में खुद को लपेटता है।

इस घटना में कि वापसी मूल्य एक आदिम है, async फ़ंक्शन एक मान लौटाता है, इसे एक वादे में लपेटता है। इस घटना में कि वापसी मूल्य वादे का उद्देश्य है, नए समाधान में इसका समाधान वापस किया जाता है।

 const p = Promise.resolve('hello') p instanceof Promise; // true Promise.resolve(p) === p; // true 

लेकिन अगर एसिंक्रोनस फ़ंक्शन के अंदर कोई त्रुटि होती है तो क्या होता है?

 async function foo() { throw Error('bar'); } foo().catch(console.log); 

यदि इसे संसाधित नहीं किया जाता है, तो foo () रिड्यूज के साथ एक वादा लौटाएगा। इस स्थिति में, Promise.resolve के बजाय, Promise.reject एक त्रुटि से युक्त होगा।

आउटपुट पर Async फ़ंक्शंस हमेशा वादे देते हैं, चाहे जो भी लौटा हो।

अतुल्यकालिक कार्यों को प्रत्येक प्रतीक्षा पर रोक दिया जाता है।

आवा भावों को प्रभावित करता है। इसलिए, यदि अभिव्यक्ति एक वादा है, तो async फ़ंक्शन निलंबित है जब तक कि वादा निष्पादित नहीं किया जाता है। इस घटना में कि अभिव्यक्ति एक वादा नहीं है, यह वादा के माध्यम से एक वादा में बदल जाती है। समाधान और फिर समाप्त कर दिया जाता है।

 // utility function to cause delay // and get random value const delayAndGetRandom = (ms) => { return new Promise(resolve => setTimeout( () => { const val = Math.trunc(Math.random() * 100); resolve(val); }, ms )); }; async function fn() { const a = await 9; const b = await delayAndGetRandom(1000); const c = await 5; await delayAndGetRandom(1000); return a + b * c; } // Execute fn fn().then(console.log); 

यहाँ fn फ़ंक्शन कैसे काम करता है, इसका विवरण दिया गया है।

• इसे कॉल करने के बाद, पहली पंक्ति को कॉन्स्टेंट ए = प्रतीक्षा 9 से परिवर्तित किया जाता है; in const a = wait Promise.resolve (9) ;;
• अद्वैत का उपयोग करने के बाद, फ़ंक्शन का निष्पादन तब तक निलंबित रहता है जब तक कि वह अपना मूल्य प्राप्त नहीं करता (वर्तमान स्थिति में, यह 9 है)।
• delayAndGetRandom (1000) fn फ़ंक्शन के निष्पादन को तब तक रोकती है जब तक कि यह स्वयं (1 सेकंड के बाद) समाप्त न हो जाए। यह वास्तव में 1 सेकंड के लिए fn फ़ंक्शन को रोक रहा है।
• विलंबएंडगेटग्रैंडैम (1000) रिज़ॉल्यूशन के माध्यम से एक यादृच्छिक मूल्य देता है, जिसे तब चर बी को सौंपा जाता है।
• खैर, चर सी का मामला चर के मामले के समान है। उसके बाद, सब कुछ एक सेकंड के लिए बंद हो जाता है, लेकिन अब देरीगेटग्रैंडग्रैंड (1000) कुछ भी नहीं देता है, क्योंकि यह आवश्यक नहीं है।
• परिणामस्वरूप, मानों की गणना सूत्र a + b * c द्वारा की जाती है। परिणाम वादा के साथ लिपटे हुए है।

ये रोकें ES6 में जनरेटर से मिल सकती हैं, लेकिन इसके कारण हैं।

हम समस्या का समाधान करते हैं

खैर, अब हम उस समस्या का समाधान देखते हैं जिसका उल्लेख ऊपर किया गया था।



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

यहां संख्याओं के आउटपुट के साथ एक समाधान है, दो विकल्प हैं।

 const wait = (i, ms) => new Promise(resolve => setTimeout(() => resolve(i), ms)); // Implementation One (Using for-loop) const printNumbers = () => new Promise((resolve) => { let pr = Promise.resolve(0); for (let i = 1; i <= 10; i += 1) { pr = pr.then((val) => { console.log(val); return wait(i, Math.random() * 1000); }); } resolve(pr); }); // Implementation Two (Using Recursion) const printNumbersRecursive = () => { return Promise.resolve(0).then(function processNextPromise(i) { if (i === 10) { return undefined; } return wait(i, Math.random() * 1000).then((val) => { console.log(val); return processNextPromise(i + 1); }); }); }; 

और यहाँ async फ़ंक्शंस का उपयोग करके एक समाधान है।

 async function printNumbersUsingAsync() { for (let i = 0; i < 10; i++) { await wait(i, Math.random() * 1000); console.log(i); } } 

हैंडलिंग में त्रुटि

अप्रमाणित त्रुटियों को अस्वीकार किए गए वादों में लपेटा जाता है। हालाँकि, async फ़ंक्शंस में, आप सिंक्रोनस एरर हैंडलिंग को करने के लिए ट्राई / कैच निर्माण का उपयोग कर सकते हैं।

 async function canRejectOrReturn() { // wait one second await new Promise(res => setTimeout(res, 1000)); // Reject with ~50% probability if (Math.random() > 0.5) { throw new Error('Sorry, number too big.') } return 'perfect number'; } 

canRejectOrReturn () एक अतुल्यकालिक फ़ंक्शन है जो या तो सफल होता है ("सही संख्या") या एक त्रुटि के साथ विफल होता है ("क्षमा करें, संख्या बहुत बड़ी")।

 async function foo() { try { await canRejectOrReturn(); } catch (e) { return 'error caught'; } } 

चूंकि canRejectOrReturn को उपरोक्त उदाहरण में निष्पादित करने की उम्मीद है, इसलिए इसका स्वयं का असफल समापन कैच ब्लॉक के निष्पादन को पूरा करेगा। नतीजतन, फू फ़ंक्शन या तो अपरिभाषित के साथ समाप्त हो जाएगा (जब कोशिश ब्लॉक में कुछ भी वापस नहीं किया जाता है) या त्रुटि के साथ पकड़ा गया। नतीजतन, यह फ़ंक्शन विफल नहीं होगा, क्योंकि कोशिश / पकड़ स्वयं फू फ़ंक्शन को संभाल लेंगे।

यहाँ एक और उदाहरण है:

 async function foo() { try { return canRejectOrReturn(); } catch (e) { return 'error caught'; } } 

यह इस तथ्य पर ध्यान देने योग्य है कि foo canRejectOrReturn से उदाहरण में वापस आ गया है। इस मामले में फू या तो एक सही संख्या के साथ पूरा होता है या एक त्रुटि ("क्षमा करें, संख्या बहुत बड़ी") त्रुटि देता है। कैच ब्लॉक को कभी निष्पादित नहीं किया जाएगा।

समस्या यह है कि foo canRejectOrReturn से पारित वादा वापस करता है। इसलिए, फू फ़ंक्शन का समाधान canRejectOrReturn का समाधान बन जाता है। इस स्थिति में, कोड में केवल दो लाइनें होंगी:

 try { const promise = canRejectOrReturn(); return promise; } 

लेकिन अगर आप इंतजार करते हैं और एक साथ लौटते हैं तो क्या होता है:

 async function foo() { try { return await canRejectOrReturn(); } catch (e) { return 'error caught'; } } 

उपरोक्त कोड में, फू सही संख्या और त्रुटि दोनों के साथ सफल होता है। कोई असफलता नहीं होगी। लेकिन फू canRejectOrReturn के साथ समाप्त होगा, और अपरिभाषित के साथ नहीं। चलिए वापसी का इंतजार खत्म करके इसे सुनिश्चित करते हैं।

 try { const value = await canRejectOrReturn(); return value; } // … 

आम गलतियाँ और नुकसान

कुछ मामलों में, Async / Await का उपयोग करने के परिणामस्वरूप त्रुटियां हो सकती हैं।

भुला दिया गया इंतजार

यह बहुत बार होता है - वादे से पहले, प्रतीक्षित कीवर्ड को भुला दिया जाता है:

 async function foo() { try { canRejectOrReturn(); } catch (e) { return 'caught'; } } 

कोड में, जैसा कि आप देख सकते हैं, न तो प्रतीक्षा है और न ही वापसी है। इसलिए, फू हमेशा 1 सेकंड की देरी के बिना अपरिभाषित के साथ बाहर निकलता है। लेकिन वादा पूरा किया जाएगा। यदि यह एक त्रुटि देता है या एक रिजेक्ट करता है, तो UnhandledPromiseRejectionWarning कहा जाएगा।

कॉलबैक में Async फ़ंक्शंस

Async फ़ंक्शन अक्सर कॉलबैक के रूप में .map या .filter में उपयोग किए जाते हैं। एक उदाहरण fetchPublicReposCount (उपयोगकर्ता नाम) फ़ंक्शन है, जो GitHub पर खुलने वाले रिपॉजिटरी की संख्या लौटाता है। मान लीजिए कि तीन उपयोगकर्ता हैं जिनकी मीट्रिक हमें चाहिए। इस कार्य का कोड इस प्रकार है:

 const url = 'https://api.github.com/users'; // Utility fn to fetch repo counts const fetchPublicReposCount = async (username) => { const response = await fetch(`${url}/${username}`); const json = await response.json(); return json['public_repos']; } 

हमें ArfatSalman, octocat, norvig के खातों की आवश्यकता है। इस मामले में, निष्पादित करें:

 const users = [ 'ArfatSalman', 'octocat', 'norvig' ]; const counts = users.map(async username => { const count = await fetchPublicReposCount(username); return count; }); 

आपको .map कॉलबैक में Await पर ध्यान देना चाहिए। यहां मायने रखता है वादों की एक सरणी, अच्छी तरह से .मैप प्रत्येक निर्दिष्ट उपयोगकर्ता के लिए एक अनाम कॉलबैक है।

अत्यधिक प्रतीक्षा का लगातार उपयोग

एक उदाहरण के रूप में निम्नलिखित कोड लें:

 async function fetchAllCounts(users) { const counts = []; for (let i = 0; i < users.length; i++) { const username = users[i]; const count = await fetchPublicReposCount(username); counts.push(count); } return counts; } 

यहां, रेपो नंबर को काउंट वेरिएबल में रखा जाता है, फिर इस नंबर को काउंट्स ऐरे में जोड़ा जाता है। कोड के साथ समस्या यह है कि जब तक सर्वर से पहला उपयोगकर्ता डेटा नहीं आता है, तब तक के सभी उपयोगकर्ता स्टैंडबाय मोड में होंगे। इस प्रकार, एक ही क्षण में, केवल एक उपयोगकर्ता संसाधित होता है।

यदि, उदाहरण के लिए, एक उपयोगकर्ता को संसाधित करने में लगभग 300 एमएस लगते हैं, तो सभी उपयोगकर्ताओं के लिए यह पहले से ही एक दूसरा है, रैखिक रूप से बिताया गया समय उपयोगकर्ताओं की संख्या पर निर्भर करता है। लेकिन चूंकि रिपॉज की संख्या प्राप्त करना एक दूसरे पर निर्भर नहीं करता है, इसलिए प्रक्रियाओं को समानांतर किया जा सकता है। इसे .map और Promise.all के साथ काम करने की आवश्यकता है:

 async function fetchAllCounts(users) { const promises = users.map(async username => { const count = await fetchPublicReposCount(username); return count; }); return Promise.all(promises); } 

वादा में इनपुट पर वादे की वापसी के साथ वादों की एक सरणी प्राप्त होती है। सरणी में या पहले रिजेक्ट के सभी वादे पूरे होने के बाद अंतिम एक पूरा हो जाता है। ऐसा हो सकता है कि सभी एक ही समय में शुरू न हों - एक साथ लॉन्च सुनिश्चित करने के लिए, आप पी-मैप का उपयोग कर सकते हैं।

निष्कर्ष

Async विशेषताएँ विकास के लिए महत्वपूर्ण होती जा रही हैं। खैर, Async-functions के अनुकूली उपयोग के लिए यह Async Iterators का उपयोग करने के लायक है। जावास्क्रिप्ट डेवलपर को इसमें पारंगत होना चाहिए।

स्किलबॉक्स अनुशंसा करता है:

• व्यावहारिक पाठ्यक्रम "मोबाइल डेवलपर प्रो" ।
• एप्लाइड ऑनलाइन पाठ्यक्रम "पायथन में डेटा विश्लेषक" ।
• दो वर्षीय व्यावहारिक पाठ्यक्रम "मैं एक प्रो वेब डेवलपर हूं" ।