😁 🔄 🕵🏿 जावास्क्रिप्ट async / प्रतीक्षा डिजाइन: ताकत, नुकसान, और उपयोग पैटर्न 👥 ✋ 🕗

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

एसिंक्स / वेट की ताकत

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

// async/await async getBooksByAuthorWithAwait(authorId) {  const books = await bookModel.fetchAll();  return books.filter(b => b.authorId === authorId); } //  getBooksByAuthorWithPromise(authorId) {  return bookModel.fetchAll()    .then(books => books.filter(b => b.authorId === authorId)); }

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

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

सभी प्रमुख ब्राउज़र अतुल्यकालिक कार्यों का समर्थन करते हैं ( caniuse.com )

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

निम्नलिखित आंकड़ा एक एसिंक्रोनस फ़ंक्शन की डिबगिंग प्रक्रिया को दर्शाता है। यहां, फ़ंक्शन के पहले निर्देश पर एक ब्रेकपॉइंट सेट करते समय और जब स्टेप ओवर कमांड को निष्पादित करते समय, जब डिबगर लाइन पर पहुंचता है जहां await कीवर्ड का उपयोग किया जाता है, तो आप नोटिस कर सकते हैं कि bookModel.fetchAll() इंतजार कर थोड़ी देर के लिए रुक जाता है। जहाँ .filter() कमांड को लाइन पर .filter() ! इस तरह की डिबगिंग प्रक्रिया डिबगिंग वादों की तुलना में बहुत सरल लगती है। यहां, समान कोड डीबग करते समय, आपको .filter() में एक और ब्रेकपॉइंट सेट करना होगा।

एक एसिंक्रोनस फ़ंक्शन को डीबग करना। डीबगर प्रतीक्षा रेखा के पूरा होने का इंतजार करेगा और ऑपरेशन पूरा होने के बाद अगली पंक्ति में जाएगा

विचाराधीन तंत्र की एक और ताकत, जो कि हमने पहले से ही जांच की तुलना में कम स्पष्ट है, यहां async कीवर्ड की उपस्थिति है। हमारे मामले में, इसका उपयोग यह सुनिश्चित करता है कि getBooksByAuthorWithAwait() द्वारा लौटाया गया मूल्य एक वादा है। परिणामस्वरूप, आप सुरक्षित रूप से getBooksByAuthorWithAwait().then(...) उपयोग कर सकते हैं getBooksByAuthorWithAwait().then(...) या await getBooksByAuthorWithAwait() इस फ़ंक्शन को कॉल करने वाले कोड में निर्माण करें। निम्नलिखित उदाहरण पर विचार करें (ध्यान दें कि यह अनुशंसित नहीं है):

 getBooksByAuthorWithPromise(authorId) { if (!authorId) {   return null; } return bookModel.fetchAll()   .then(books => books.filter(b => b.authorId === authorId)); } }

यहाँ getBooksByAuthorWithPromise() फ़ंक्शन हो सकता है, अगर सब कुछ ठीक है, एक वादा वापस करें, या, अगर कुछ गलत हो गया है - null । परिणामस्वरूप, यदि कोई त्रुटि होती है, तो आप यहां सुरक्षित रूप से .then() कॉल नहीं कर सकते। जब async का उपयोग करके फ़ंक्शन की घोषणा करते हैं, तो इस तरह की त्रुटियां असंभव हैं।

Async / इंतजार की गलत धारणा के बारे में

कुछ प्रकाशनों में, एसिंक्स / प्रतीक्षित निर्माण की तुलना वादों से की जाती है और अतुल्यकालिक जावास्क्रिप्ट प्रोग्रामिंग के विकास की अगली पीढ़ी का प्रतिनिधित्व करने के लिए कहा जाता है। इसके साथ, ऐसे प्रकाशनों के लेखकों के लिए पूरे सम्मान के साथ, मैं खुद को असहमत होने की अनुमति देता हूं। Async / इंतजार एक सुधार है, लेकिन यह "सिंटैक्टिक शुगर" से ज्यादा कुछ नहीं है, जिसकी उपस्थिति से प्रोग्रामिंग शैली में पूर्ण परिवर्तन नहीं होता है।

संक्षेप में, अतुल्यकालिक कार्य वादे हैं। इससे पहले कि कोई प्रोग्रामर ठीक से async / प्रतीक्षा निर्माण का उपयोग कर सकता है, उसे वादों का अच्छी तरह से अध्ययन करना चाहिए। इसके अलावा, ज्यादातर मामलों में, अतुल्यकालिक कार्यों के साथ काम करना, आपको वादों का उपयोग करने की आवश्यकता है।

उपरोक्त उदाहरण से getBooksByAuthorWithAwait() और getBooksByAuthorWithPromises() फ़ंक्शन पर एक नज़र डालें। कृपया ध्यान दें कि वे न केवल कार्यक्षमता के मामले में समान हैं। उनके पास भी बिल्कुल वही इंटरफेस है।

इसका मतलब यह है कि यदि आप सीधे getBooksByAuthorWithAwait() फ़ंक्शन को कॉल करते हैं, तो यह वादा वापस करेगा।

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

Async / इंतजार की नुकसान

आइए सबसे सामान्य गलतियों के बारे में बात करते हैं जो async / प्रतीक्षा का उपयोग करके की जा सकती हैं। विशेष रूप से, अतुल्यकालिक कार्यों के लगातार कॉल के तर्कहीन उपयोग के बारे में।

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

 async getBooksAndAuthor(authorId) { const books = await bookModel.fetchAll(); const author = await authorModel.fetch(authorId); return {   author,   books: books.filter(book => book.authorId === authorId), }; }

तर्क की दृष्टि से यह संहिता सही प्रतीत होती है। हालांकि, एक गंभीर समस्या है। यह इसी तरह काम करता है।

सिस्टम पुकार का await bookModel.fetchAll() और इंतजार करता है .fetchAll() कमांड को पूरा करने के लिए।
bookModel.fetchAll() await authorModel.fetch(authorId) से परिणाम प्राप्त करने के बाद कहा जाएगा।

ध्यान दें कि authorModel.fetch(authorId) पर कॉल bookModel.fetchAll() को कॉल के परिणामों से स्वतंत्र है, और वास्तव में, इन दो आदेशों को समानांतर में निष्पादित किया जा सकता है। हालाँकि, क्रमिक रूप से निष्पादित की जा रही इन दोनों कॉलों में await परिणाम का उपयोग करना। इन दोनों आदेशों के अनुक्रमिक निष्पादन का कुल समय उनके समानांतर निष्पादन के समय से अधिक होगा।

यहाँ इस तरह के कोड लिखने का सही तरीका है:

 async getBooksAndAuthor(authorId) { const bookPromise = bookModel.fetchAll(); const authorPromise = authorModel.fetch(authorId); const book = await bookPromise; const author = await authorPromise; return {   author,   books: books.filter(book => book.authorId === authorId), }; }

अतुल्यकालिक कार्यों के दुरुपयोग के एक और उदाहरण पर विचार करें। यह पिछले उदाहरण की तुलना में अभी भी बदतर है। जैसा कि आप देख सकते हैं, कुछ तत्वों की सूची को अतुल्यकालिक रूप से लोड करने के लिए, हमें वादों की संभावनाओं पर भरोसा करने की आवश्यकता है।

 async getAuthors(authorIds) { //  ,     // const authors = _.map( //   authorIds, //   id => await authorModel.fetch(id)); //   const promises = _.map(authorIds, id => authorModel.fetch(id)); const authors = await Promise.all(promises); }

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

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

वादों का उपयोग करते समय, अतुल्यकालिक कोड का निष्पादन उम्मीद के मुताबिक समाप्त हो सकता है - फिर वे कहते हैं कि वादा सफलतापूर्वक हल हो गया है, या एक त्रुटि के साथ - फिर वे कहते हैं कि वादा खारिज कर दिया गया है। यह हमें क्रमशः .catch() और .catch() का उपयोग करने में सक्षम बनाता है। हालाँकि, async / प्रतीक्षा तंत्र का उपयोग करने में त्रुटि से मुश्किल हो सकता है।

▍ कोशिश करो / निर्माण पकड़ो

Async / प्रतीक्षा का उपयोग करते समय त्रुटियों को संभालने का मानक तरीका ट्राइ / कैच निर्माण के साथ है। मैं इस दृष्टिकोण का उपयोग करने की सलाह देता हूं। प्रतीक्षा कॉल करते समय, वादा खारिज होने पर वापस किया गया मान अपवाद के रूप में प्रस्तुत किया जाता है। यहाँ एक उदाहरण है:

 class BookModel { fetchAll() {   return new Promise((resolve, reject) => {     window.setTimeout(() => { reject({'error': 400}) }, 1000);   }); } } // async/await async getBooksByAuthorWithAwait(authorId) { try { const books = await bookModel.fetchAll(); } catch (error) { console.log(error);    // { "error": 400 } }

catch में पकड़ी गई त्रुटि बिलकुल वैसा ही मूल्य है जब वादा खारिज किया जाता है। एक अपवाद को पकड़ने के बाद, हम इसके साथ काम करने के लिए कई दृष्टिकोण लागू कर सकते हैं:

आप अपवाद को संभाल सकते हैं और सामान्य मान वापस कर सकते हैं। यदि आप एसिंक्रोनस फ़ंक्शन के निष्पादित होने के बाद जो अपेक्षित है उसे वापस करने के लिए catch में return एक्सप्रेशन का उपयोग नहीं करते हैं, तो यह return undefined का उपयोग करने के बराबर होगा;
आप बस उस जगह पर त्रुटि को पास कर सकते हैं जहां विफल हुआ कोड को कॉल किया गया था और इसे वहां संसाधित करने की अनुमति दी गई थी। आप throw error; जैसी कमांड का उपयोग करके सीधे एक एरर फेंक सकते हैं throw error; , जो आपको वादों की श्रृंखला में async getBooksByAuthorWithAwait() फ़ंक्शन का उपयोग करने की अनुमति देता है। यही है, इसे getBooksByAuthorWithAwait().then(...).catch(error => ...) का उपयोग करके बुलाया जा सकता है getBooksByAuthorWithAwait().then(...).catch(error => ...) निर्माण करें। इसके अलावा, आप एरर को Error ऑब्जेक्ट में लपेट सकते हैं, जो throw new Error(error) तरह लग सकता है। यह अनुमति देगा, उदाहरण के लिए, कंसोल में त्रुटि जानकारी आउटपुट करते समय, पूर्ण कॉल स्टैक देखें।
त्रुटि को अस्वीकार किए गए वादे के रूप में दर्शाया जा सकता है, यह return Promise.reject(error) । return Promise.reject(error) जैसा दिखता है। इस मामले में, यह throw error कमांड के बराबर है, ऐसा करने की अनुशंसा नहीं की जाती है।

यहाँ कोशिश / पकड़ निर्माण का उपयोग करने के लाभ हैं:

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

यह ध्यान दिया जाना चाहिए कि कोशिश / पकड़ तंत्र में एक खामी है। चूँकि ट्रायल ब्लॉक में होने वाले किसी भी अपवाद को पकड़ने / पकड़ने का try है, जो अपवाद वादों से संबंधित नहीं हैं, वे भी catch में मिल जाएंगे। इस उदाहरण पर एक नज़र डालें।

 class BookModel { fetchAll() {   cb();    //    ,   `cb`  ,       return fetch('/books'); } } try { bookModel.fetchAll(); } catch(error) { console.log(error);  //       "cb is not defined" }

यदि आप इस कोड को निष्पादित करते हैं, तो आप ReferenceError: cb is not defined देखेंगे ReferenceError: cb is not defined कंसोल में ReferenceError: cb is not defined त्रुटि संदेश ReferenceError: cb is not defined है। यह संदेश console.log() catch से कमांड console.log() द्वारा आउटपुट है, और जावास्क्रिप्ट द्वारा ही नहीं। कुछ मामलों में, ऐसी त्रुटियां गंभीर परिणाम देती हैं। उदाहरण के लिए, यदि कॉलिंग bookModel.fetchAll(); फ़ंक्शन कॉल की एक श्रृंखला में गहरी छिपी और कॉल में से एक "निगल" एक त्रुटि है, इस तरह की त्रुटि का पता लगाना बहुत मुश्किल होगा।

। दो मूल्यों का फंक्शन रिटर्न

असिंक्रोनस कोड में त्रुटियों को संभालने के अगले तरीके के लिए प्रेरणा गो है। यह अतुल्यकालिक कार्यों को एक त्रुटि और परिणाम दोनों को वापस करने की अनुमति देता है। इसके बारे में यहाँ और पढ़ें।

संक्षेप में, फिर इस दृष्टिकोण के साथ, अतुल्यकालिक कार्यों का उपयोग किया जा सकता है:

 [err, user] = await to(UserModel.findById(1));

व्यक्तिगत रूप से, मुझे यह पसंद नहीं है, क्योंकि यह त्रुटि हैंडलिंग विधि गो प्रोग्रामिंग शैली को जावास्क्रिप्ट में पेश करती है, जो अप्राकृतिक लगती है, हालांकि, कुछ मामलों में, यह बहुत उपयोगी हो सकती है।

.Use का .catch

त्रुटियों को संभालने का अंतिम तरीका, जिसके बारे में हम बात करेंगे, का उपयोग .catch() । .catch() ।

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

 // books   undefined   , //    catch     let books = await bookModel.fetchAll() .catch((error) => { console.log(error); });

दो छोटी समस्याएं इस दृष्टिकोण की विशेषता हैं:

यह वादों और अतुल्यकालिक कार्यों का मिश्रण है। वादों के काम की विशेषताओं को समझने के लिए, इसका उपयोग करने के लिए, अन्य समान मामलों में भी यह आवश्यक है।
यह दृष्टिकोण सहज नहीं है, क्योंकि त्रुटि हैंडलिंग एक असामान्य स्थान पर की जाती है।

परिणाम

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

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

प्रिय पाठकों! क्या आप जावास्क्रिप्ट में async / प्रतीक्षा निर्माण का उपयोग करते हैं? यदि हां, तो कृपया हमें बताएं कि आप एसिंक्रोनस कोड में त्रुटियों को कैसे संभालते हैं।

जावास्क्रिप्ट async / प्रतीक्षा डिजाइन: ताकत, नुकसान, और उपयोग पैटर्न