🏴‍☠️ 🎄 💇🏿 यहां तक कि बच्चे भी समझेंगे: async / प्रतीक्षा का एक सरल विवरण और जावास्क्रिप्ट में वादे 🧑🏼‍🤝‍🧑🏼 🚺 🤽

नमस्कार, हेब्र! मैं आपके लिए जैक पार्डी के लेख "जावास्क्रिप्ट Async / Await और वादे: समझा जैसे आप पांच साल पुराने हैं" का अनुवाद प्रस्तुत करते हैं।

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

जब मैंने जावास्क्रिप्ट सीखना और लिखना शुरू किया, तो पहले से ही एक अरब ट्यूटोरियल और ट्यूटोरियल समझा रहे थे कि जावास्क्रिप्ट में एसिंक्रोनस कैसे प्राप्त किया जाए। हालाँकि, उनमें से बहुतों ने बताया कि कैसे कॉल-अलंकरण के कार्यों को वादों या वादों में बदलना है। कई लोगों के लिए, यह संभवतः उनके साथ पाने के लिए और उनके कोड में उनका उपयोग शुरू करने के लिए पर्याप्त है।

हालांकि, यदि आप, मेरी तरह, वास्तव में अतुल्यकालिक प्रोग्रामिंग (और सिर्फ जावास्क्रिप्ट सिंटैक्स नहीं समझना चाहते हैं!), तो आप मुझसे सहमत हो सकते हैं कि स्क्रैच से अतुल्यकालिक प्रोग्रामिंग की व्याख्या करने वाली सामग्री की कमी है।

एसिंक्रोनस का क्या अर्थ है?

एक नियम के रूप में, यह सवाल पूछते हुए, आप निम्नलिखित में से कुछ सुन सकते हैं:

कई धागे हैं जो एक ही समय में कोड निष्पादित करते हैं।
एक बार में एक से अधिक कोड निष्पादित किए जाते हैं।
यह संगति है।

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

जीवन उदाहरण

चित्र सब्जियों और रसोई के चाकू को दर्शाता है

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

गाजर को काट लें।
प्याज को काट लें।
पैन में पानी डालें, स्टोव चालू करें और उबाल आने तक प्रतीक्षा करें।
पैन में गाजर जोड़ें और 5 मिनट के लिए छोड़ दें।
पैन में प्याज जोड़ें और एक और 10 मिनट के लिए खाना बनाना।

ये निर्देश सरल और समझ में आते हैं, लेकिन अगर आप में से एक, इसे पढ़ रहा है, तो वास्तव में खाना बनाना जानता है, आप कह सकते हैं कि यह खाना पकाने का सबसे प्रभावी तरीका नहीं है। और आप सही होंगे, ऐसा क्यों:

चरण 3, 4 और 5 को वास्तव में प्रक्रिया का पालन करने और समय का ध्यान रखने के अलावा कुछ भी करने के लिए आपको शेफ की आवश्यकता नहीं है ।
चरण 1 और 2 आपको सक्रिय रूप से कुछ करने की आवश्यकता है।

इसलिए, एक अधिक अनुभवी कुक के लिए नुस्खा निम्नानुसार हो सकता है:

पानी के एक बर्तन को उबालना शुरू करें।
बर्तन को उबालने के लिए इंतजार करते समय, गाजर काटना शुरू करें।
जब तक आप गाजर काटते हैं, तब तक पानी उबलना चाहिए, इसलिए गाजर डालें।
जबकि गाजर एक पैन में पकाया जाता है, प्याज काट लें।
प्याज जोड़ें और एक और 10 मिनट पकाना।

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

हम सभी जानते हैं कि प्रोग्रामिंग में, किसी चीज़ का इंतज़ार करना अक्सर होता है - चाहे वह किसी सर्वर से HTTP रिस्पॉन्स का इंतज़ार कर रहा हो या किसी यूज़र का एक्शन या कुछ और। लेकिन आपके प्रोसेसर का निष्पादन चक्र कीमती है और हमेशा सक्रिय रूप से उपयोग किया जाना चाहिए, कुछ करना, और उम्मीद नहीं करना: यह आपको अतुल्यकालिक प्रोग्रामिंग देता है।

अब चलो जावास्क्रिप्ट, ठीक है?

इसलिए, सब्जी सूप के एक ही उदाहरण के बाद, मैं ऊपर वर्णित नुस्खा के चरणों का प्रतिनिधित्व करने के लिए कुछ फ़ंक्शन लिखूंगा।

पहले, आइए समकालिक कार्यों को लिखें जो उन कार्यों का प्रतिनिधित्व करते हैं जो समय नहीं लेते हैं। ये अच्छे पुराने जावास्क्रिप्ट फ़ंक्शंस हैं, लेकिन ध्यान दें कि मैंने chopCarrots और chopOnions को chopOnions रूप में वर्णित किया है जिन्हें सक्रिय कार्य (और समय) की आवश्यकता होती है, जिससे उन्हें कुछ लंबी गणना करने की अनुमति मिलती है। पूर्ण कोड लेख के अंत में उपलब्ध है [1]।

 function chopCarrots() { /*   ... */ console.log(" !"); } function chopOnions() { /*   ... */ console.log(" !"); } function addOnions() { console.log("   !"); } function addCarrots() { console.log("   !"); }

अतुल्यकालिक कार्यों के लिए आगे बढ़ने से पहले, मैं सबसे पहले यह बताऊंगा कि जावास्क्रिप्ट प्रकार प्रणाली अतुल्यकालिक कैसे संभालती है: मूल रूप से अतुल्यकालिक संचालन के सभी परिणाम (त्रुटियों सहित) को वादे (ओं) में लपेटा जाना चाहिए ।

एक वादा वापस करने के लिए एक समारोह के लिए, आप कर सकते हैं:

स्पष्ट रूप से वादा वापस करें, अर्थात return new Promise(…) ;
अंतर्निहित रूप से एक वादा लौटाएं - फ़ंक्शन की घोषणा के लिए async जोड़ें, अर्थात्। async function foo() ;
दोनों विकल्पों का उपयोग करें ।

एक उत्कृष्ट लेख [2] है, जो एसिंक्रोनस कार्यों और कार्यों के बीच अंतर के बारे में बात करता है जो एक वादा लौटाता है। इसलिए, मेरे लेख में मैं इस विषय पर ध्यान नहीं दूंगा, याद रखने की मुख्य बात: आपको एसिंक्रोनस कार्यों में हमेशा async उपयोग करना चाहिए।

इसलिए, हमारे अतुल्यकालिक कार्य, सब्जी सूप तैयार करने के चरण 3-5 का प्रतिनिधित्व करते हैं, इस प्रकार हैं:

 async function letPotKeepBoiling(time) { return; //  ,      } async function boilPot() { return; //  ,       }

एक बार फिर, मैंने कार्यान्वयन विवरण को हटा दिया ताकि उनके द्वारा विचलित न हों, लेकिन वे लेख के अंत में प्रकाशित होते हैं [1]।

यह जानना महत्वपूर्ण है कि वादे के परिणाम की प्रतीक्षा करने के लिए, ताकि बाद में आप इसके साथ कुछ कर सकें, आप बस await कीवर्ड का उपयोग कर सकते हैं:

 async function asyncFunction() { /*  ... */ } result = await asyncFunction();

तो, अब हमें बस इसे एक साथ रखने की आवश्यकता है:

 function makeSoup() { const pot = boilPot(); chopCarrots(); chopOnions(); await pot; addCarrots(); await letPotKeepBoiling(5); addOnions(); await letPotKeepBoiling(10); console.log("   !"); } makeSoup();

लेकिन रुकिए! यह काम नहीं करता है! आप SyntaxError: await is only valid in async functions देखेंगे SyntaxError: await is only valid in async functions त्रुटि SyntaxError: await is only valid in async functions । क्यों? क्योंकि यदि आप async का उपयोग करके किसी फ़ंक्शन को घोषित नहीं करते हैं, तो डिफ़ॉल्ट रूप से जावास्क्रिप्ट इसे एक सिंक्रोनस फ़ंक्शन के रूप में परिभाषित करता है - और सिंक्रोनस का अर्थ है कोई प्रतीक्षा नहीं! [3]। इसका मतलब यह भी है कि आप किसी फ़ंक्शन के बाहर का उपयोग नहीं कर सकते।

इसलिए, हम बस async को makeSoup फ़ंक्शन में makeSoup हैं:

 async function makeSoup() { const pot = boilPot(); chopCarrots(); chopOnions(); await pot; addCarrots(); await letPotKeepBoiling(5); addOnions(); await letPotKeepBoiling(10); console.log("   !"); } makeSoup();

और वोइला! ध्यान दें कि दूसरी पंक्ति में, मैं बिना boilPot कीवर्ड के एसिंक्रोनस फ़ंक्शन boilPot को कॉल करता boilPot , क्योंकि हम गाजर काटने से पहले पैन को उबालने के लिए इंतजार नहीं करना चाहते हैं। हम केवल पांचवीं पंक्ति में pot के वादे की उम्मीद करते हैं इससे पहले कि हमें गाजर को पैन में डालने की ज़रूरत है, क्योंकि हम पानी में उबालने से पहले ऐसा नहीं करना चाहते हैं।

await कॉल के दौरान क्या होता है? खैर, कुछ नहीं ... तरह ...

makeSoup फ़ंक्शन के संदर्भ में makeSoup आप बस इसके बारे में सोच सकते हैं कि आप कुछ होने की उम्मीद करते हैं (या एक परिणाम जो अंततः वापस आ जाएगा)।

लेकिन याद रखें: आप (आपके प्रोसेसर की तरह) कभी भी वहां बैठना और किसी चीज का इंतजार नहीं करना चाहेंगे, जबकि आप अपना समय दूसरी चीजों पर बिता सकते हैं ।

इसलिए, केवल सूप पकाने के बजाय, हम समानांतर में कुछ और पका सकते हैं:

 makeSoup(); makePasta();

जबकि हम letPotKeepBoiling प्रतीक्षा कर रहे हैं, हम कर सकते हैं, उदाहरण के लिए, पास्ता पकाना।

आप देखते हैं? Async / प्रतीक्षित वाक्य रचना वास्तव में उपयोग करने के लिए बहुत आसान है, अगर आप इसे समझते हैं, सहमत हैं?

ओवरट वादे का क्या?

ठीक है, अगर आप जोर देते हैं, तो मैं स्पष्ट वादों ( लगभग अनुवाद) के उपयोग की ओर मुड़ूंगा। स्पष्ट वादों से, लेखक सीधे वादों के वाक्य-विन्यास से तात्पर्य करता है, और अंतर्निहित वादों से वाक्य-विन्यास async / प्रतीक्षा करता है, क्योंकि यह वादा प्रतिफलित करता है - लिखने की कोई आवश्यकता नहीं है। return new Promise(…) । ध्यान रखें कि async / प्रतीक्षित विधियाँ स्वयं वादों पर आधारित हैं और इसलिए दोनों विकल्प पूरी तरह से संगत हैं ।

स्पष्ट वादे, मेरी राय में, पुराने शैली के कॉलबैक और नए एसिंक्स / प्रतीक्षित यौन वाक्य-विन्यास के बीच हैं। वैकल्पिक रूप से, आप async / प्रतीक्षा यौन सिंटैक्स के बारे में भी सोच सकते हैं क्योंकि निहित वादों से अधिक कुछ भी नहीं है। अंत में, वादों के बाद async / प्रतीक्षित निर्माण आया, जो बदले में कॉलबैक फ़ंक्शन के बाद आया था।

कॉलबैक नरक में जाने के लिए हमारे समय मशीन का उपयोग करें [4]:

 function callbackHell() { boilPot( () => { addCarrots(); letPotKeepBoiling(() => { addOnions(); letPotKeepBoiling(() => { console.log("   !"); }, 1000); }, 5000); }, 5000, chopCarrots(), chopOnions() ); }

मैं झूठ नहीं बोलने जा रहा हूं, मैंने इस उदाहरण को मक्खी पर लिखा था जब मैं इस लेख पर काम कर रहा था, और मुझे स्वीकार करने की तुलना में मुझे बहुत अधिक समय लगा। आप में से कई लोग यह भी नहीं जानते होंगे कि यहां क्या चल रहा है। मेरे प्यारे दोस्त, ये सभी कॉलबैक फ़ंक्शन भयानक नहीं हैं? इसे एक बार फिर से कॉलबैक फ़ंक्शंस का उपयोग न करने का सबक दें ...

और, जैसा कि वादा किया गया था, स्पष्ट वादों के साथ एक ही उदाहरण:

 function makeSoup() { return Promise.all([ new Promise((reject, resolve) => { chopCarrots(); chopOnions(); resolve(); }), boilPot() ]) .then(() => { addCarrots(); return letPotKeepBoiling(5); }) .then(() => { addOnions(); return letPotKeepBoiling(10); }) .then(() => { console.log("   !"); }); }

जैसा कि आप देख सकते हैं, वादे अभी भी कॉलबैक फ़ंक्शन के समान हैं।
मैं विवरण में नहीं जाऊंगा, लेकिन सबसे महत्वपूर्ण बात:

.then एक वादा विधि है जो अपना परिणाम लेती है और इसे तर्क फ़ंक्शन (अनिवार्य रूप से, कॉलबैक फ़ंक्शन ...) को पास करती है।
आप कभी भी .then के संदर्भ में एक वादा के परिणाम का उपयोग नहीं कर सकते। संक्षेप में, .then एक एसिंक्रोनस ब्लॉक की तरह होता है जो एक परिणाम की अपेक्षा करता है और फिर उसे कॉलबैक फ़ंक्शन में भेजता है।
.catch पद्धति के अतिरिक्त, .catch में एक और विधि है - .catch । वादों में त्रुटियों को संभालने के लिए यह आवश्यक है। लेकिन मैं विवरण में नहीं जाऊंगा, क्योंकि इस विषय पर पहले से ही एक अरब लेख और ट्यूटोरियल हैं।

निष्कर्ष

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

तो, आप किस तरह का उपयोग करते हैं: वादे या async / प्रतीक्षा?
जवाब पूरी तरह से आप पर निर्भर है - और मैं कहूंगा कि उनका संयोजन इतना बुरा नहीं है, क्योंकि दोनों दृष्टिकोण एक दूसरे के साथ पूरी तरह से संगत हैं।

हालाँकि, मैं व्यक्तिगत रूप से async / प्रतीक्षारत शिविर में 100% हूं, क्योंकि मेरे लिए कोड बहुत अधिक समझने योग्य है और बेहतर अतुल्यकालिक प्रोग्रामिंग के सच्चे मल्टीटास्किंग को दर्शाता है।

[१] : पूर्ण स्रोत कोड यहाँ उपलब्ध है ।
[२] : मूल लेख "Async फ़ंक्शन बनाम। एक फ़ंक्शन जो एक वादा करता है " , लेख का अनुवाद " एक अतुल्यकालिक फ़ंक्शन और एक फ़ंक्शन के बीच अंतर जो एक वादा लौटाता है । "
[३] : आप तर्क दे सकते हैं कि जावास्क्रिप्ट संभवत: फ़ंक्शन बॉडी और पुनरावर्ती जाँच द्वारा एसिंक्स / प्रतीक्षा प्रकार का निर्धारण कर सकती है, लेकिन जावास्क्रिप्ट का संकलन समय पर स्थिर प्रकार की सुरक्षा का ध्यान रखने के लिए नहीं किया गया था, जिसका उल्लेख नहीं है यह डेवलपर्स के लिए फ़ंक्शन के प्रकार को स्पष्ट रूप से देखने के लिए बहुत अधिक सुविधाजनक है।
[४] : मैंने "अतुल्यकालिक" कार्यों को लिखा, यह मानते हुए कि वे setTimeout के समान इंटरफ़ेस के तहत काम करते हैं। ध्यान दें कि कॉलबैक वादों के अनुकूल नहीं हैं और इसके विपरीत।

यहां तक ​​कि बच्चे भी समझेंगे: async / प्रतीक्षा का एक सरल विवरण और जावास्क्रिप्ट में वादे

एसिंक्रोनस का क्या अर्थ है?

जीवन उदाहरण

अब चलो जावास्क्रिप्ट, ठीक है?

ओवरट वादे का क्या?

निष्कर्ष

More articles:

यहां तक कि बच्चे भी समझेंगे: async / प्रतीक्षा का एक सरल विवरण और जावास्क्रिप्ट में वादे