🤳🏼 🔍 📵 वादा और Async / प्रतीक्षा का दृश्य 📝 📴 ⚫️

शुभ दिन, दोस्तों!

मैं आपके लिए लिडा हल्ली के लेख "जावास्क्रिप्ट विज़ुअलाइज़्ड: प्रोमिस एंड असिंक्स / इंतजार" का अनुवाद प्रस्तुत करता हूं ।

क्या आप जावास्क्रिप्ट कोड भर आए हैं ... जो अपेक्षित रूप से काम नहीं करता है? जब कार्य अनियंत्रित, अप्रत्याशित क्रम में किए जाते हैं, या देरी से किए जाते हैं। वादों के मुख्य कार्यों में से एक कार्य के निष्पादन को सुव्यवस्थित करना है।

मेरी अतृप्त जिज्ञासा और रातों की नींद हराम हो गई - पूरे धन्यवाद के साथ मैंने कई एनिमेशन बनाए। वादों के बारे में बात करने का समय है: वे कैसे काम करते हैं, उनका उपयोग क्यों किया जाना चाहिए, और यह कैसे किया जाता है।

परिचय

JS कोड लिखते समय, हमें अक्सर उन कार्यों से निपटना पड़ता है जो अन्य कार्यों पर निर्भर करते हैं। मान लीजिए हम एक छवि प्राप्त करना चाहते हैं, इसे संपीड़ित करें, इसके लिए एक फ़िल्टर लागू करें और इसे सहेजें।

सबसे पहले, हमें एक छवि प्राप्त करने की आवश्यकता है। ऐसा करने के लिए, फ़ंक्शन का उपयोग करें getImage। छवि को लोड करने के बाद, हम इसे फ़ंक्शन में पास करते हैं resizeImage। छवि को संपीड़ित करने के बाद, हम फ़ंक्शन का उपयोग करके इसे एक फ़िल्टर लागू करते हैं applyFilter। फ़िल्टर को संपीड़न और लागू करने के बाद, हम छवि को सहेजते हैं और उपयोगकर्ता को सफलता के बारे में सूचित करते हैं।

परिणामस्वरूप, हम निम्नलिखित प्राप्त करते हैं:

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

सौभाग्य से, आज हमारे पास वादे हैं।

वादा सिंटेक्स

ES6 में वादे पेश किए गए थे। कई मैनुअल में आप निम्नलिखित पढ़ सकते हैं:

एक वादा (वादा) एक मूल्य है जो भविष्य में पूरा या अस्वीकार किया जाता है।

हाँ ... तो-स्पष्टीकरण। एक समय में, इसने मुझे वादों को कुछ अजीब, अस्पष्ट, किसी प्रकार का जादू बनाने वाला माना। वे वास्तव में क्या हैं?

हम एक रचनाकार के साथ एक वादा कर सकते हैं जो Promiseएक तर्क के रूप में कॉलबैक फ़ंक्शन लेता है। कूल, चलो कोशिश करें:

रुको, यहाँ वापस क्या आ रहा है?

Promiseएक वस्तु है जिसमें स्थिति ( [[PromiseStatus]]) और मूल्य ( [[PromiseValue]]) है। उपरोक्त उदाहरण में, मूल्य [[PromiseStatus]]है pending, और वादा का मूल्य है undefined।

चिंता न करें, आपको इस ऑब्जेक्ट के साथ सहभागिता करने की आवश्यकता नहीं है, आप [[PromiseStatus]]और गुणों तक भी नहीं पहुंच सकते [[PromiseValue]]। हालांकि, वादों के साथ काम करते समय ये गुण बहुत महत्वपूर्ण हैं।

PromiseStatus या वादे की स्थिति तीन में से एक मान ले सकती है:

fulfilled: resolved (). ,
rejected: rejected (). -
pending: , pending (, )

बहुत अच्छा लगता है, लेकिन जब वादा किया गया दर्जा प्राप्त होता है तो क्या होता है? और स्टेटस क्यों मायने रखता है?

उपरोक्त उदाहरण में, हम कंस्ट्रक्टर Promiseको एक साधारण कॉलबैक फ़ंक्शन पास करते हैं () => {}। यह फ़ंक्शन वास्तव में दो तर्क देता है। पहले तर्क का मूल्य, जिसे आमतौर पर कहा जाता है resolveया res, वादे को निष्पादित करने पर लागू विधि है। दूसरे तर्क का मूल्य, जिसे आमतौर पर कहा जाता है rejectया कहा जाता है rej, वह विधि जिसे वादा गलत होने पर खारिज कर दिया जाता है।

आइए देखें कि तरीकों को कॉल करते समय कंसोल में क्या आउटपुट है : resolveऔर कूल! अब हम जानते हैं कि स्थिति और अर्थ से कैसे छुटकारा पाया जाए । विधि को कॉल करते समय वादे की स्थिति है , जब -reject

pendingundefinedresolvefulfilledrejectrejected।

[[PromiseValue]]या वादे का मूल्य वह मूल्य है जो हम विधियों resolveया rejectएक तर्क के रूप में पास करते हैं।

मजेदार तथ्य: जेक आर्चीबाल्ड ने इस लेख को क्रोम में एक बग को पढ़ने के बाद बताया, जो बदले में fulfilledलौट आया resolved।

ठीक है, अब हम जानते हैं कि वस्तु के साथ कैसे काम किया जाए Promise। लेकिन इसका उपयोग किस लिए किया जाता है?

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

सौभाग्य से, वादे इससे निपटने में मदद करते हैं। हम कोड को फिर से लिखते हैं ताकि प्रत्येक फ़ंक्शन एक वादा लौटाए।

यदि छवि लोड हुई है, तो हम एक वादा करते हैं। अन्यथा, यदि कोई त्रुटि होती है, तो वादे को अस्वीकार करें:

आइए देखें कि क्या होता है जब यह कोड टर्मिनल में चलाया जाता है:

कूल! जैसा कि हम उम्मीद करते हैं, प्रोमिस पार्स ("पार्स") डेटा के साथ लौटता है।

लेकिन ... आगे क्या है? हम प्रोमो के विषय में रुचि नहीं रखते हैं, हम इसके डेटा में रुचि रखते हैं। एक वादा मूल्य प्राप्त करने के लिए 3 अंतर्निहित तरीके हैं:

.then(): वादा करने के बाद बुलाया जाता है
.catch(): वचन की अस्वीकृति के बाद कहा जाता है
.finally(): हमेशा बुलाया जाता है, निष्पादन के बाद और वादे की अस्वीकृति के बाद

विधि .thenविधि को भेजे गए मान लेता है resolve:

विधि .catchविधि को भेजे गए मान लेता है reject:

अंत में, हम वांछित मान मिला है। हम इस मूल्य के साथ कुछ भी कर सकते हैं।

जब हम पूर्ति या एक वादा की अस्वीकृति में विश्वास कर रहे हैं, तो आप लिख सकते हैं Promise.resolveया तो Promise.rejectउचित मूल्य के साथ।

यह सिंटैक्स है जिसका उपयोग निम्नलिखित उदाहरणों में किया जाएगा।

परिणाम .thenवादा का मूल्य है (यानी, यह विधि भी वादा वापस करती है)। इसका मतलब है कि हम .thenआवश्यकतानुसार उपयोग कर सकते हैं : पिछले के परिणाम .thenको अगले के तर्क के रूप में पारित किया जाता है .then।

में getImageहम कई उपयोग कर सकते हैं .thenअगले कार्य करने के लिए कार्रवाई की छवि हस्तांतरण करने के लिए।

यह सिंटैक्स नेस्टेड कॉलबैक फ़ंक्शन की सीढ़ी से बहुत बेहतर दिखता है।

माइक्रोटस्क और (मैक्रो) कार्य

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

सबसे पहले, यह कंसोल में प्रदर्शित होता है Start!। यह सामान्य है, क्योंकि हमारे पास कोड की पहली पंक्ति है console.log('Start!')। कंसोल पर प्रदर्शित दूसरा मान End!पूर्ण वादे का मूल्य नहीं है। वादे का मूल्य अंतिम प्रदर्शित किया जाता है। यह क्यों हुआ?

यहां हम वादों की ताकत देखते हैं। हालाँकि JS सिंगल-थ्रेडेड है, फिर भी हम कोड को एसिंक्रोनस बना सकते हैं Promise।

हम अतुल्यकालिक व्यवहार कहां देख सकते हैं? ब्राउज़र में निर्मित कुछ विधियाँ, जैसे setTimeout, अतुल्यकालिक का अनुकरण कर सकती हैं।

सही ईवेंट लूप (ईवेंट लूप) में दो प्रकार की कतारें होती हैं: (मैक्रो) कार्यों की कतार या सिर्फ कार्य ((मैक्रो) कार्य कतार, कार्य कतार) और माइक्रोटेस्क या केवल माइक्रोटेस्क (माइक्रोट्यूज़ कतार, माइक्रोटेस) की कतार।

उनमें से प्रत्येक पर क्या लागू होता है? संक्षेप में, तब:

मैक्रो टास्क: setTimeout, setInterval, setImmediate
माइक्रोट्रूक्स: process.nextTick, Promise callback, queueMicrotask

हम Promiseमाइक्रो-मास्क की सूची में देखते हैं । जब Promiseविधि निष्पादित होती है और कॉल की जाती है then(), catch()या finally(), विधि के साथ कॉलबैक फ़ंक्शन को माइक्रोटस्क क्यू में जोड़ा जाता है। इसका मतलब यह है कि विधि के साथ कॉलबैक तुरंत निष्पादित नहीं किया जाता है, जो जेएस कोड को अतुल्यकालिक बनाता है।

जब विधि होती है then(), catch()या finally()इसे निष्पादित किया जाता है? इवेंट लूप में कार्य की प्राथमिकता निम्न है:

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

एक उदाहरण पर विचार करें:

Task1: एक फ़ंक्शन जिसे तुरंत स्टैक में जोड़ा जाता है, उदाहरण के लिए, कोड में कॉल द्वारा।
Task2, Task3, Task4: Mikrozadachi उदाहरण thenवादा या कार्य के माध्यम से जोड़ा queueMicrotask।
Task5, Task6: मैक्रो कार्य, उदाहरण के लिए, setTimeoutयाsetImmediate

पहले Task1एक मान लौटाता है और स्टैक से निकाल दिया जाता है। तब इंजन संबंधित कतार में माइक्रोटेस्क के लिए जांच करता है। स्टैक से माइक्रोटेक्सेस को जोड़ने और बाद में हटाने के बाद, इंजन मैक्रो कार्यों के लिए जांच करता है, जो स्टैक में भी जोड़ा जाता है और मानों को वापस करने के बाद इसे हटा दिया जाता है।

पर्याप्त शब्द। कोड लिखते हैं।

इस कोड में, हमारे पास एक मैक्रो setTimeoutटास्क और एक माइक्रो टास्क है .then। कोड चलाएं और देखें कि कंसोल में क्या दिखाया गया है।

नोट: उपरोक्त उदाहरण में, मैं इस तरह के तरीकों का उपयोग करता हूं console.log, setTimeoutऔर Promise.resolve। ये सभी विधियां आंतरिक हैं, इसलिए वे स्टैक ट्रेस में नहीं दिखाई देते हैं - जब आप उन्हें ब्राउज़र समस्या निवारण उपकरण में नहीं पाते हैं तो आश्चर्यचकित न हों।

पहली पंक्ति में हमारे पास हैconsole.log। इसे स्टैक में जोड़ा जाता है और कंसोल में प्रदर्शित किया जाता है Start!। उसके बाद, इस विधि को स्टैक से हटा दिया जाता है और इंजन कोड को पार्स करना जारी रखता है।

इंजन पहुंचता है setTimeout, जिसे स्टैक में जोड़ा जाता है। यह विधि एक अंतर्निहित ब्राउज़र विधि है: इसका कॉलबैक फ़ंक्शन ( () => console.log('In timeout')) वेब एपीआई में जोड़ा जाता है और टाइमर की आग से पहले होता है। इस तथ्य के बावजूद कि टाइमर काउंटर 0 है, कॉलबैक को अभी भी पहले WebAPI में रखा गया है और फिर मैक्रो टास्क कतार में: setTimeout- यह एक मैक्रो टास्क है।

अगला, इंजन विधि तक पहुंचता है Promise.resolve()। इस पद्धति को स्टैक में जोड़ा जाता है, और फिर एक मान के साथ निष्पादित किया जाता है Promise। उसका कॉलबैक thenमाइक्रोटस्क क्यू में रखा गया है।

अंत में, इंजन दूसरी विधि तक पहुंचता है console.log()। यह तुरंत स्टैक पर धकेल दिया जाता है, यह कंसोल पर आउटपुट होता हैEnd!विधि को स्टैक से हटा दिया जाता है, और इंजन जारी रहता है।

इंजन "देखता है" कि स्टैक खाली है। कार्य कतार की जाँच करना। यह वहां स्थित है then। इसे स्टैक पर धकेल दिया जाता है, वादे का मूल्य कंसोल पर प्रदर्शित होता है: इस मामले में, एक स्ट्रिंग Promise!।

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

यह मैक्रो कार्य कतार की जाँच करने का समय है: यह वहाँ है setTimeout। यह स्टैक पर धकेल दिया जाता है और एक विधि देता है console.log()। कंसोल के लिए एक स्ट्रिंग आउटपुट है 'In timeout!'। setTimeoutस्टैक से निकाल दिया जाता है।

किया हुआ। अब सब कुछ ठीक हो गया?

Async / प्रतीक्षा करें

ES7 ने JS में एसिंक्रोनस कोड के साथ काम करने का एक नया तरीका पेश किया। कीवर्ड का उपयोग करना asyncऔर awaitहम एक एसिंक्रोनस फ़ंक्शन बना सकते हैं जो एक वादा वापस करता है। लेकिन ... हम यह कैसे करते हैं?

इससे पहले, हमने चर्चा की कि किसी वस्तु को स्पष्ट रूप से कैसे बनाया जाए Promise: उपयोग करना new Promise(() => {}), Promise.resolveया Promise.reject।

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

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

यह पता चला है कि हम एक अतुल्यकालिक फ़ंक्शन के निष्पादन में देरी कर सकते हैं? महान, लेकिन ... इसका क्या मतलब है?

आइए देखें कि जब आप निम्नलिखित कोड चलाते हैं तो क्या होता है:

पहले तो इंजन देखता है console.log। यह विधि स्टैक पर धकेल दी जाती है और कंसोल पर प्रदर्शित होती है Before function!।

फिर एसिंक्रोनस फ़ंक्शन को कहा जाता है myFunc(), इसके कोड को निष्पादित किया जाता है। इस कोड की पहली पंक्ति में, हम दूसरी console.logपंक्ति के साथ कॉल करते हैं 'In function!'। इस पद्धति को स्टैक में जोड़ा जाता है, इसका मान कंसोल पर प्रदर्शित होता है, और इसे स्टैक से हटा दिया जाता है।

फ़ंक्शन कोड को अगले निष्पादित किया जाता है। दूसरी लाइन पर हमारे पास एक कीवर्ड है await।

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

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

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

सभी कोड को एक वैश्विक संदर्भ में निष्पादित किया गया है, घटना लूप microtasks और पता लगाता है myFunc()। myFunc()स्टैक पर धक्का दिया और निष्पादित किया गया।

चर resको फ़ंक्शन द्वारा वापस किए गए निष्पादित वादे का मूल्य मिलता है one। हम console.logचर के मूल्य के साथ कहते हैं res: One!इस मामले में एक स्ट्रिंग । One!यह कंसोल में प्रदर्शित होता है।

किया हुआ। एसिंक्रोनस फ़ंक्शन और thenप्रॉमिस विधि के बीच अंतर पर ध्यान दें ? कीवर्डawaitएक अतुल्यकालिक समारोह के निष्पादन को स्थगित करता है। अगर हम प्रयोग करते then, तो वादा शरीर चलता रहता।

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

इसके अलावा "सेवा कर्मचारियों के काम का विज़ुअलाइज़ेशन" देखें ।

आपके समय के लिए शुक्रिया। मुझे आशा है कि यह अच्छी तरह से खर्च किया गया था।

वादा और Async / प्रतीक्षा का दृश्य

परिचय

वादा सिंटेक्स

माइक्रोटस्क और (मैक्रो) कार्य

Async / प्रतीक्षा करें

More articles: