🙍🏼 🧕🏻 👺 जावास्क्रिप्ट इंजन: वे कैसे काम करते हैं? कॉल स्टैक से वादों तक, (लगभग) वह सब कुछ जो आपको जानना आवश्यक है 🛠️ 👨🏿‍✈️ 👯

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

हम जावास्क्रिप्ट इंजन की अद्भुत दुनिया में एक भ्रमण के साथ भाषा में अपनी यात्रा शुरू करते हैं।

Chrome में कंसोल खोलें और स्रोत टैब पर जाएं। आप कई खंड देखेंगे, और सबसे दिलचस्प में से एक को कॉल स्टैक कहा जाता है (फ़ायरफ़ॉक्स में आप कॉल स्टैक देखेंगे जब आप कोड में एक ब्रेकपॉइंट डालते हैं):

कॉल स्टैक क्या है? लगता है कि यहां बहुत कुछ हो रहा है, यहां तक कि कोड की एक दो पंक्तियों को निष्पादित करने के लिए भी। वास्तव में, जावास्क्रिप्ट हर ब्राउज़र के साथ एक बॉक्स में नहीं आता है। एक बड़ा घटक है जो हमारे जावास्क्रिप्ट कोड को संकलित और व्याख्या करता है - यह एक जावास्क्रिप्ट इंजन है। सबसे लोकप्रिय V8 हैं, इसका उपयोग Google Chrome और Node.js में किया जाता है, फ़ायरफ़ॉक्स में स्पाइडरमोंकी, Safari / WebKit में JavaScriptCore।

जावास्क्रिप्ट इंजन आज सॉफ्टवेयर इंजीनियरिंग के महान उदाहरण हैं, और सभी पहलुओं के बारे में बात करना लगभग असंभव होगा। हालांकि, कोड निष्पादन पर मुख्य कार्य इंजन के केवल कुछ घटकों द्वारा किया जाता है: कॉल स्टैक (कॉल स्टैक), ग्लोबल मेमोरी (वैश्विक मेमोरी) और निष्पादन संदर्भ (निष्पादन संदर्भ)। उनसे मिलने के लिए तैयार हैं?

सामग्री:

1. जावास्क्रिप्ट इंजन और वैश्विक मेमोरी

मैंने कहा कि जावास्क्रिप्ट एक संकलित और व्याख्या की गई भाषा है। मानो या न मानो, जावास्क्रिप्ट इंजन वास्तव में निष्पादित होने से पहले आपके कोड को माइक्रोसेकंड में संकलित करते हैं।

किसी तरह का जादू, हुह? इस जादू को JIT (बस समय संकलन में) कहा जाता है। यह अकेले चर्चा का एक बड़ा विषय है, यहां तक कि किताबें भी जेआईटी के काम का वर्णन करने के लिए पर्याप्त नहीं होंगी। लेकिन अभी के लिए, हम सिद्धांत को छोड़ देंगे और निष्पादन चरण पर ध्यान केंद्रित करेंगे, जो कम दिलचस्प नहीं है।

आरंभ करने के लिए, इस कोड को देखें:

var num = 2; function pow(num) { return num * num; }

मान लीजिए कि मैं आपसे पूछता हूं कि इस कोड को ब्राउज़र में कैसे संसाधित किया जाता है? आप क्या जवाब देंगे? आप कह सकते हैं: "ब्राउज़र कोड पढ़ता है" या "ब्राउज़र कोड को निष्पादित करता है"। वास्तव में, सब कुछ इतना सरल नहीं है। सबसे पहले, कोड ब्राउज़र द्वारा नहीं, बल्कि इंजन द्वारा पढ़ा जाता है। जावास्क्रिप्ट इंजन कोड को पढ़ता है , और जैसे ही यह पहली पंक्ति को परिभाषित करता है, यह वैश्विक मेमोरी में कुछ लिंक डालता है।

वैश्विक मेमोरी (जिसे हीप भी कहा जाता है) वह क्षेत्र है जिसमें जावास्क्रिप्ट इंजन चर और फ़ंक्शन घोषणाओं को संग्रहीत करता है। और जब वह ऊपर दिए गए कोड को पढ़ेगा, तो वैश्विक मेमोरी में दो बाइंडर दिखाई देंगे:

भले ही उदाहरण में केवल एक चर और फ़ंक्शन होता है, कल्पना करें कि आपका जावास्क्रिप्ट कोड एक बड़े वातावरण में निष्पादित किया गया है: एक ब्राउज़र में या Node.js. ऐसे वातावरण में, कई पूर्वनिर्धारित कार्य और चर होते हैं जिन्हें वैश्विक कहा जाता है। इसलिए, वैश्विक मेमोरी में केवल num और pow तुलना में बहुत अधिक डेटा शामिल होंगे, ध्यान रखें।

फिलहाल कुछ नहीं चल रहा है। आइए अब हमारे कार्य को निष्पादित करने का प्रयास करें:

 var num = 2; function pow(num) { return num * num; } pow(num);

क्या होगा? और कुछ दिलचस्प होगा। फ़ंक्शन को कॉल करते समय, जावास्क्रिप्ट इंजन दो वर्गों को उजागर करेगा:

वैश्विक निष्पादन संदर्भ
कॉल स्टैक

वे क्या हैं?

2. जावास्क्रिप्ट इंजन: वे कैसे काम करते हैं? वैश्विक निष्पादन संदर्भ और कॉल स्टैक

आपने सीखा कि जावास्क्रिप्ट इंजन कैसे चर और फ़ंक्शन घोषणाओं को पढ़ता है। वे वैश्विक स्मृति (ढेर) में आते हैं।

लेकिन अब हम एक जावास्क्रिप्ट फ़ंक्शन निष्पादित कर रहे हैं, और इंजन को इस बात का ध्यान रखना चाहिए। कैसे? प्रत्येक जावास्क्रिप्ट इंजन में एक प्रमुख घटक होता है जिसे कॉल स्टैक कहा जाता है ।

यह एक स्टैक्ड डेटा संरचना है : तत्वों को ऊपर से इसमें जोड़ा जा सकता है, लेकिन उन्हें संरचना से बाहर नहीं किया जा सकता है जबकि उनके साथ अन्य तत्व हैं। इस प्रकार जावास्क्रिप्ट कार्य करता है। निष्पादन में, वे कॉल स्टैक नहीं छोड़ सकते हैं यदि कोई अन्य फ़ंक्शन इसमें मौजूद है। इस पर ध्यान दें, क्योंकि यह अवधारणा कथन को समझने में मदद करती है "जावास्क्रिप्ट एकल-थ्रेडेड है।"

लेकिन वापस हमारे उदाहरण पर। जब कोई फ़ंक्शन कहा जाता है, तो इंजन उसे कॉल स्टैक पर भेजता है :

मुझे कॉल स्टैक को प्रिंगल्स चिप्स के ढेर के रूप में प्रस्तुत करना पसंद है। हम ढेर के नीचे से चिप्स नहीं खा सकते हैं जब तक कि हम उन लोगों को नहीं खाते हैं जो शीर्ष पर हैं। सौभाग्य से, हमारा कार्य तुल्यकालिक है: यह सिर्फ एक गुणन है जो जल्दी से गणना करता है।

उसी समय, इंजन मेमोरी में वैश्विक निष्पादन संदर्भ देता है, यह वैश्विक वातावरण है जिसमें जावास्क्रिप्ट कोड निष्पादित होता है। यहाँ यह कैसा दिखता है:

समुद्र के रूप में एक वैश्विक निष्पादन संदर्भ की कल्पना करें जिसमें वैश्विक जावास्क्रिप्ट फ़ंक्शन मछली की तरह तैरते हैं। कितना मीठा! लेकिन यह केवल आधी कहानी है। क्या होगा यदि हमारे फ़ंक्शन में चर या आंतरिक फ़ंक्शन नेस्टेड हैं?

यहां तक कि सरल मामले में, जैसा कि नीचे दिखाया गया है, जावास्क्रिप्ट इंजन एक स्थानीय निष्पादन संदर्भ बनाता है:

 var num = 2; function pow(num) { var fixed = 89; return num * num; } pow(num);

ध्यान दें कि मैंने pow फ़ंक्शन के लिए fixed चर जोड़ा। इस मामले में, स्थानीय निष्पादन संदर्भ में fixed लिए एक अनुभाग होगा। मैं अन्य छोटी छोटी आयतों के अंदर छोटे आयत बनाने में बहुत अच्छा नहीं हूँ, इसलिए अपनी कल्पना का उपयोग करें।

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

आइए, सिंगल-थ्रेडेड कहानी पर वापस आते हैं। इसका क्या मतलब है?

3. जावास्क्रिप्ट एकल-पिरोया, और अन्य मजेदार कहानियां हैं

हम कहते हैं कि जावास्क्रिप्ट सिंगल-थ्रेडेड है क्योंकि केवल एक कॉल स्टैक हमारे कार्यों को संभालता है । मुझे याद दिलाएं कि अन्य फ़ंक्शन निष्पादन की अपेक्षा करते हैं तो फ़ंक्शन कॉल स्टैक को नहीं छोड़ सकते।

अगर हम सिंक्रोनस कोड के साथ काम करते हैं तो यह कोई समस्या नहीं है। उदाहरण के लिए, दो संख्याओं का जोड़ तुल्यकालिक है और इसकी गणना माइक्रोसेकंड में की जाती है। बाहरी दुनिया के साथ नेटवर्क कॉल और अन्य इंटरैक्शन के बारे में क्या?

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

उसी समय, आप जानते हैं कि जब ब्राउज़र किसी प्रकार के जावास्क्रिप्ट कोड को लोड करता है, तो इंजन इस कोड लाइन को लाइन से पढ़ता है और निम्नलिखित चरणों को पूरा करता है:

वैरिएबल और फ़ंक्शन घोषणाओं को वैश्विक मेमोरी (हीप) में डालता है।
कॉल स्टैक पर प्रत्येक फ़ंक्शन के लिए एक कॉल भेजता है।
एक वैश्विक निष्पादन संदर्भ बनाता है जिसमें वैश्विक कार्यों को निष्पादित किया जाता है।
कई छोटे स्थानीय निष्पादन संदर्भ बनाता है (यदि आंतरिक चर या नेस्टेड फ़ंक्शन हैं)।

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

4. अतुल्यकालिक जावास्क्रिप्ट, कॉलबैक कतार, और घटना पाश

वैश्विक मेमोरी, निष्पादन संदर्भ और कॉल स्टैक के लिए धन्यवाद, तुल्यकालिक जावास्क्रिप्ट कोड हमारे ब्राउज़रों में निष्पादित किया जाता है। लेकिन हम कुछ भूल गए। यदि आपको किसी प्रकार के अतुल्यकालिक फ़ंक्शन को निष्पादित करने की आवश्यकता होती है, तो क्या होता है?

अतुल्यकालिक फ़ंक्शन द्वारा, मेरा मतलब है कि बाहरी दुनिया के साथ हर बातचीत, जिसे पूरा करने में कुछ समय लग सकता है। REST API या टाइमर को कॉल करना अतुल्यकालिक है, क्योंकि उन्हें निष्पादित करने में कुछ सेकंड लग सकते हैं। इंजन में उपलब्ध तत्वों के लिए धन्यवाद, हम कॉल स्टैक और ब्राउज़र को अवरुद्ध किए बिना ऐसे कार्यों को संसाधित कर सकते हैं। मत भूलो, कॉल स्टैक एक समय में केवल एक फ़ंक्शन को निष्पादित कर सकता है, और यहां तक कि एक अवरुद्ध फ़ंक्शन शाब्दिक रूप से ब्राउज़र को रोक सकता है । सौभाग्य से, जावास्क्रिप्ट इंजन स्मार्ट हैं, और ब्राउज़र से थोड़ी मदद से वे चीजों को छाँट सकते हैं।

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

 setTimeout(callback, 10000); function callback(){ console.log('hello timer!'); }

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

10 सेकंड के बाद, ब्राउज़र कॉलबैक फ़ंक्शन लेता है जिसे हमने इसे पास किया और कॉलबैक कतार में डाल दिया। फिलहाल, दो और आयत खंड जावास्क्रिप्ट इंजन में दिखाई दिए हैं। इस कोड पर एक नज़र डालें:

 var num = 2; function pow(num) { return num * num; } pow(num); setTimeout(callback, 10000); function callback(){ console.log('hello timer!'); }

अब हमारी योजना इस प्रकार है:

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

कॉल स्टैक पर जाने से पहले प्रत्येक एसिंक्रोनस फ़ंक्शन को कॉलबैक कतार से गुजरना चाहिए। लेकिन अगले कार्यों को कौन भेजता है? यह एक इवेंट लूप नामक एक घटक बनाता है।

अब तक, ईवेंट लूप केवल एक चीज से संबंधित है: यह जांचता है कि कॉल स्टैक खाली है या नहीं। यदि कॉलबैक कतार में कोई फ़ंक्शन है और यदि कॉल स्टैक मुक्त है, तो कॉल स्टैक पर कॉलबैक भेजने का समय है।

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

मान लें कि callback() निष्पादन के लिए तैयार है। जब pow() तो कॉल स्टैक को मुक्त कर दिया जाता है और इवेंट लूप callback() भेजता callback() । और यह बात है! हालांकि मैंने चीजों को थोड़ा सरल किया, अगर आप ऊपर दिए गए आरेख को समझते हैं, तो आप सभी जावास्क्रिप्ट को समझ सकते हैं।

याद रखें: ब्राउज़र-आधारित एपीआई, कॉलबैक कतार और ईवेंट लूप्स अतुल्यकालिक जावास्क्रिप्ट के स्तंभ हैं ।

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

लेकिन हम अतुल्यकालिक जावास्क्रिप्ट विषय के साथ अभी तक नहीं किए गए हैं। निम्नलिखित अध्यायों में हम ईएस 6 वादों पर विचार करेंगे।

5. कॉलबैक नरक और ईएस 6 वादे

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

 function mapper(element){ return element * 2; } [1, 2, 3, 4, 5].map(mapper);

mapper एक कॉलबैक फ़ंक्शन है जो map अंदर पारित किया जाता है। उपरोक्त कोड तुल्यकालिक है। अब इस अंतराल पर विचार करें:

 function runMeEvery(){ console.log('Ran!'); } setInterval(runMeEvery, 5000);

यह कोड अतुल्यकालिक है, क्योंकि setInterval अंदर हम runMeEvery callback पास करते हैं। कॉलबैक का उपयोग पूरे जावास्क्रिप्ट में किया जाता है, इसलिए वर्षों से हमें "कॉलबैक नरक" - "कॉलबैक नरक" नामक एक समस्या थी।

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

सच कहूं तो, मैंने कभी कॉलबैक के बड़े पिरामिड नहीं बनाए। शायद इसलिए कि मैं पठनीय कोड को महत्व देता हूं और हमेशा इसके सिद्धांतों पर टिकने की कोशिश करता हूं। यदि आप कॉलबैक नरक से टकराते हैं, तो इसका मतलब है कि आपका कार्य बहुत अधिक है।

मैं कॉलबैक नरक के बारे में विस्तार से बात नहीं करूंगा, अगर आप रुचि रखते हैं, तो callbackhell.com पर जाएं , जहां इस समस्या की विस्तार से जांच की गई है और विभिन्न समाधान प्रस्तावित किए गए हैं। और हम ES6 वादों के बारे में बात करेंगे। यह एक जावास्क्रिप्ट ऐडऑन है जिसे नरक कॉलबैक समस्या को हल करने के लिए डिज़ाइन किया गया है। लेकिन वादे क्या हैं?

एक जावास्क्रिप्ट वादा एक भविष्य की घटना का एक प्रतिनिधित्व है । एक वादा सफलतापूर्वक समाप्त हो सकता है, या प्रोग्रामर के शब्दजाल में, एक वादा "हल" (हल) होगा। लेकिन यदि वादा त्रुटि के साथ समाप्त होता है, तो हम कहते हैं कि यह अस्वीकार की स्थिति में है। वादों की भी एक डिफ़ॉल्ट स्थिति होती है: प्रत्येक नया वादा लंबित स्थिति में शुरू होता है। क्या मैं अपना वादा बना सकता हूं? हां। हम इस बारे में अगले अध्याय में बात करेंगे।

6. जावास्क्रिप्ट और वादे के साथ काम करना

एक नया वादा करने के लिए, आपको एक कॉलबैक फ़ंक्शन को पास करके निर्माता को कॉल करना होगा। यह केवल दो पैरामीटर ले सकता है: resolve और reject । आइए एक नया वादा करें जिसे 5 सेकंड में हल किया जाएगा (आप ब्राउज़र कंसोल में उदाहरणों का परीक्षण कर सकते हैं):

 const myPromise = new Promise(function(resolve){ setTimeout(function(){ resolve() }, 5000) });

जैसा कि आप देख सकते हैं, resolve एक फ़ंक्शन है जिसे हम कहते हैं ताकि वादा सफलतापूर्वक समाप्त हो जाए। और reject एक अस्वीकृत वादा बनाएगा:

 const myPromise = new Promise(function(resolve, reject){ setTimeout(function(){ reject() }, 5000) });

ध्यान दें कि आप reject कर सकते reject क्योंकि यह दूसरा पैरामीटर है। लेकिन यदि आप reject का उपयोग करने का इरादा रखते reject , तो आप resolve अनदेखा नहीं कर सकते । अर्थात्, निम्न कोड काम नहीं करेगा और एक स्वीकृत वादा के साथ समाप्त होगा:

 // Can't omit resolve ! const myPromise = new Promise(function(reject){ setTimeout(function(){ reject() }, 5000) });

वादे अभी इतने उपयोगी नहीं दिखते, ठीक है? ये उदाहरण उपयोगकर्ता को कुछ भी प्रदर्शित नहीं करते हैं। चलो कुछ जोड़ते हैं। और अनुमति दी, अस्वीकार किए गए वादे डेटा वापस कर सकते हैं। उदाहरण के लिए:

 const myPromise = new Promise(function(resolve) { resolve([{ name: "Chris" }]); });

लेकिन हम अभी भी कुछ नहीं देख रहे हैं। किसी वादे से डेटा निकालने के लिए, आपको then विधि के साथ वादे को संबद्ध करना होगा । वह कॉलबैक लेता है (कैसी विडंबना है!), जो वर्तमान डेटा प्राप्त करता है:

 const myPromise = new Promise(function(resolve, reject) { resolve([{ name: "Chris" }]); }); myPromise.then(function(data) { console.log(data); });

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

 const shinyNewUtil = new Promise(function(resolve, reject) { // do stuff and resolve // or reject });

और यदि आवश्यक हो, तो हम Promise.resolve() कॉल करके एक वादा भी बना सकते हैं और हल कर सकते हैं:

 Promise.resolve({ msg: 'Resolve!'}) .then(msg => console.log(msg));

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

7. ES6 वादों में त्रुटि हैंडलिंग

जावास्क्रिप्ट में हैंडलिंग त्रुटियाँ हमेशा आसान थीं, कम से कम सिंक्रोनस कोड में। एक उदाहरण देखें:

 function makeAnError() { throw Error("Sorry mate!"); } try { makeAnError(); } catch (error) { console.log("Catching the error! " + error); }

परिणाम होगा:

 Catching the error! Error: Sorry mate!

जैसी कि उम्मीद थी, त्रुटि catch में गिर गई। अब एसिंक्रोनस फ़ंक्शन का प्रयास करें:

 function makeAnError() { throw Error("Sorry mate!"); } try { setTimeout(makeAnError, 5000); } catch (error) { console.log("Catching the error! " + error); }

यह कोड setTimeout कारण अतुल्यकालिक है। यदि हम इसे निष्पादित करते हैं तो क्या होगा?

  throw Error("Sorry mate!"); ^ Error: Sorry mate! at Timeout.makeAnError [as _onTimeout] (/home/valentino/Code/piccolo-javascript/async.js:2:9)

अब परिणाम अलग है। catch त्रुटि पकड़ में नहीं आई, लेकिन स्वतंत्र रूप से स्टैक ऊपर उठ गया। कारण यह है कि try/catch केवल तुल्यकालिक कोड के साथ काम करता है। यदि आप अधिक जानना चाहते हैं, तो इस समस्या पर यहां विस्तार से चर्चा की गई है ।

सौभाग्य से, वादों के साथ, हम अतुल्यकालिक त्रुटियों को संभाल सकते हैं जैसे कि वे तुल्यकालिक थे। पिछले अध्याय में, मैंने कहा था कि reject करने से वादे की अस्वीकृति होती है:

 const myPromise = new Promise(function(resolve, reject) { reject('Errored, sorry!'); });

इस मामले में, हम कॉल हैंडलर का उपयोग करके त्रुटियों को संभाल सकते हैं (फिर से) एक कॉलबैक:

 const myPromise = new Promise(function(resolve, reject) { reject('Errored, sorry!'); }); myPromise.catch(err => console.log(err));

इसके अलावा, सही जगह पर एक वादा बनाने और अस्वीकार करने के लिए, आप Promise.reject() कह सकते हैं:

 Promise.reject({msg: 'Rejected!'}).catch(err => console.log(err));

मुझे आपको याद दिलाने दें: then हैंडलर को then निष्पादित किया जाता है जब वादे को निष्पादित किया जाता है, और अस्वीकार किए गए वादों के लिए catch हैंडलर को निष्पादित किया जाता है। लेकिन यह कहानी का अंत नहीं है। नीचे हम देखेंगे कि कैसे async/await काम try/catch साथ महान काम करते हैं।

8. ES6 वादों के संयोजक: Promise.all, Promise.allSettled, Promise.any और अन्य

वादे अकेले काम करने के लिए डिज़ाइन नहीं किए गए हैं। वादे एपीआई वादों के संयोजन के लिए कई तरीके प्रदान करता है । सबसे उपयोगी में से एक Promise.all है , यह वादों से एक सरणी लेता है और एक वादा वापस करता है। एकमात्र समस्या यह है कि Promise.all को अस्वीकार कर दिया गया है यदि सरणी में कम से कम एक वादा अस्वीकार कर दिया गया है।

Promise.race अनुमति देता है या अस्वीकार करता है जैसे ही सरणी में वादों में से एक इसी स्थिति को प्राप्त करता है।

V8 के अधिक हाल के संस्करणों में, दो नए कॉम्बिनेटर भी पेश किए जाएंगे: Promise.allSettled और Promise.any । Promise.any अभी भी प्रस्तावित कार्यक्षमता के प्रारंभिक चरण में है, इस लेख को लिखने के समय समर्थित नहीं है। हालांकि, सिद्धांत रूप में, वह यह संकेत देने में सक्षम होगा कि क्या किसी वादे को निष्पादित किया गया है। Promise.race से अंतर यह है कि Promise.any अस्वीकार नहीं किया गया है, भले ही वादों में से एक खारिज कर दिया गया हो ।

Promise.allSettled भी दिलचस्प है। वह वादों की एक श्रृंखला भी लेता है, लेकिन अगर वादों में से एक को खारिज कर दिया जाता है तो "छोटा" नहीं करता है। यह उपयोगी है जब आपको यह जांचने की आवश्यकता होती है कि अस्वीकार किए गए वादों की उपस्थिति की परवाह किए बिना किसी सरणी में सभी वादे किसी न किसी चरण में पारित हो गए हैं या नहीं। इसे Promise.all के विपरीत माना जा सकता है।

9. ES6 वादा करता है और microtask कतार

यदि आपको पिछले अध्याय से याद है, तो कॉल स्टैक को हिट करने से पहले जावास्क्रिप्ट में प्रत्येक एसिंक्रोनस कॉलबैक फ़ंक्शन कॉलबैक कतार में होता है। लेकिन प्रोमिस को दिए गए कॉलबैक फ़ंक्शन का एक अलग भाग्य है: वे कार्य कतार के बजाय माइक्रोटैस्क कतार द्वारा संसाधित होते हैं।

और यहां आपको सावधान रहने की जरूरत है: माइक्रो कतार कतार कॉल कतार से पहले आती है । जब नए कॉलबैक कॉल स्टैक पर जाने के लिए तैयार होते हैं, तो यह देखने के लिए कि क्या इवेंट लूप चेक करता है, माइक्रोटस्क क्यू से कॉलबैक पूर्वता लेते हैं।

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

10. जावास्क्रिप्ट इंजन: वे कैसे काम करते हैं? अतुल्यकालिक विकास: वादों से लेकर एसिंक्रोनस / वेट तक

जावास्क्रिप्ट तेजी से विकसित हो रहा है और हम लगातार हर साल सुधार कर रहे हैं। वादे एक समापन की तरह लग रहे थे, लेकिन ECMAScript 2017 (ES8) के साथ एक नया वाक्यविन्यास दिखाई दिया: async/await ।

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

 const myPromise = new Promise(function(resolve, reject) { resolve([{ name: "Chris" }]); }); myPromise.then((data) => console.log(data))

अब async/await हम एसिंक्रोनस कोड को संसाधित कर सकते हैं ताकि हमारी लिस्टिंग के पाठक के लिए कोड तुल्यकालिक दिखाई दे । then उपयोग करने के बजाय then हम async नामक एक फ़ंक्शन में वादा लपेट सकते हैं, और फिर हम परिणाम का await करेंगे:

 const myPromise = new Promise(function(resolve, reject) { resolve([{ name: "Chris" }]); }); async function getData() { const data = await myPromise; console.log(data); } getData();

अच्छा लग रहा है, है ना? यह हास्यास्पद है कि एक async फ़ंक्शन हमेशा एक वादा वापस करता है, और कोई भी इसे करने से रोक नहीं सकता है:

 async function getData() { const data = await myPromise; return data; } getData().then(data => console.log(data));

गलतियों के बारे में क्या? async/await का एक लाभ यह है कि यह निर्माण हमें try/catch का उपयोग try/catch अनुमति दे सकता है। Async फ़ंक्शंस और उनके परीक्षण में त्रुटि से निपटने के लिए परिचय पढ़ें।

आइए फिर से उस वादे पर एक नज़र डालते हैं, जिसमें हम catch हैंडलर के साथ त्रुटियों को संभालते हैं:

 const myPromise = new Promise(function(resolve, reject) { reject('Errored, sorry!'); }); myPromise.catch(err => console.log(err));

अतुल्यकालिक कार्यों के साथ, हम इस तरह रिफ्लेक्टर कर सकते हैं:

 async function getData() { try { const data = await myPromise; console.log(data); // or return the data with return data } catch (error) { console.log(error); } } getData();

हालांकि, हर किसी ने इस शैली पर स्विच नहीं किया है। try/catch आपके कोड को जटिल कर सकता है। विचार करने के लिए एक और बात है। देखें कि इस कोड में इस try ब्लॉक के अंदर कोई त्रुटि कैसे होती है:

 async function getData() { try { if (true) { throw Error("Catch me if you can"); } } catch (err) { console.log(err.message); } } getData() .then(() => console.log("I will run no matter what!")) .catch(() => console.log("Catching err"));

कंसोल में प्रदर्शित होने वाली दो लाइनों के बारे में क्या? याद रखें कि try/catch एक तुल्यकालिक निर्माण है, और हमारा अतुल्यकालिक फ़ंक्शन एक वादा करता है । वे गाड़ियों की तरह दो अलग-अलग रास्तों का पालन करते हैं। ! , throw , catch getData() . , «Catch me if you can», «I will run no matter what!».

, throw then . , , Promise.reject() :

 async function getData() { try { if (true) { return Promise.reject("Catch me if you can"); } } catch (err) { console.log(err.message); } } Now the error will be handled as expected: getData() .then(() => console.log("I will NOT run no matter what!")) .catch(() => console.log("Catching err")); "Catching err" // output

async/await JavaScript. .

, JS- async/await . . , async/await — .

11. JavaScript-: ?

JavaScript — , , . JS-: V8, Google Chrome Node.js; SpiderMonkey, Firefox; JavaScriptCore, Safari.

JavaScript- «» : , , , . , .

JavaScript- , . JavaScript: , - , (, ) .

ECMAScript 2015 . — , . . 2017- async/await : , , .

जावास्क्रिप्ट इंजन: वे कैसे काम करते हैं? कॉल स्टैक से वादों तक, (लगभग) वह सब कुछ जो आपको जानना आवश्यक है