जावास्क्रिप्ट प्रतीक्षा

| | | | | | | | | | | | | | | | | | | | | | | | | | |

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

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

वादे: एक पुनश्चर्या

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

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

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

यहां एक वादे का उदाहरण दिया गया है:.

हमारा कोड फ़ीडबैक: आपकी कुकी भेज दी गई हैं! जब हम SendCookies.then () विधि निष्पादित करें, हमारा वादा जारी किया गया है। हमारा प्रोग्राम 1000 मिलीसेकंड प्रतीक्षा करता है, फिर "आपकी कुकीज़ भेज दी गई है!" "हमारा मुख्य कार्यक्रम

Async और प्रतीक्षा का उपयोग कैसे करें

एक फ़ंक्शन और async / प्रतीक्षा में, एक कोड निष्पादन प्रतीक्षा कथन अपने एसिंक्रोनस फ़ंक्शन के भीतर ब्लॉक करता है जब तक कि `जिस पर एक वादा वापस नहीं किया जाता है। यही कारण है कि डेवलपर्स अक्सर दावा करते हैं कि एसिंक्रोनस / एसिंक्रोनस प्रतीक्षा कार्य करता है लेकिन एसिंक्रोनस कार्यों को निष्पादित करता है।

निम्न उदाहरण पर विचार करें:। ">

sendCookies फ़ंक्शन () {नया वादा लौटाएं (संकल्प => {सेटटाइमआउट (() => {निर्धारण ("आपकी कुकीज़ भेज दी गई हैं")!}, 1000);}); } मुख्य async फ़ंक्शन () {कॉन्स्ट सेंडमैसेज = प्रतीक्षा करें सेंडकुक यानी (); कंसोल.लॉग (भेजें संदेश); } (मुख्य); 

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

"async" फ़ंक्शन कीवर्ड हमारे कोड को बताता है कि हम एक एसिंक्रोनस प्रदर्शन करना चाहते हैं हमारे समारोह में संचालन। "उम्मीद" शब्द - कुंजी इंगित करता है कि हमारे कोड को भेजने के लिए प्रतीक्षा करें () हमारे प्रोग्राम को निष्पादित करने से पहले वापस लौटने का वादा करता है।

एसिंक्रोनस फ़ंक्शन हमेशा एक वादा लौटाते हैं।

Async और साथ का उपयोग करना मल्टीपल पास वेट

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

हमारा कोड रिटर्न:

प्रत्येक चरण में 1000 पूर्ण मिलीसेकंड लगते हैं!. हमारे SendCookies () फ़ंक्शन को तब तक निष्पादित नहीं किया जाता है जब तक कि हमारे ProcessOrder () फ़ंक्शन से वापसी का वादा नहीं किया जाता है। /p>

पहला वह तरीका है जो हमने अपने पिछले उदाहरणों में दिखाया था: फंक्शन घोषित करके। हमारे उदाहरणों में, हमने ऐसे कार्यों की घोषणा की जो एक वादा लौटाते हैं, इसलिए हमने "async" और "उम्मीद" शब्दों का उपयोग किया - इन कार्यों को करने के लिए कुंजी

आप दिशा कार्यों का उपयोग करके एक अतुल्यकालिक फ़ंक्शन भी घोषित कर सकते हैं:

यह कोड लौटाता है: आपकी कुकीज़ भेज दी गई हैं! यह हमारे पहले उदाहरण के समान है, लेकिन मुख्य () फ़ंक्शन घोषित करने के बजाय हमने एक तीर फ़ंक्शन का उपयोग किया

इसी तरह आप फ़ंक्शन के एक्सप्रेशन सिंटैक्स का उपयोग कर सकते हैं:। (); कंसोल.लॉग (sendMessage);}

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

वास्तव में, यह सिंटैक्स हमारे पिछले उदाहरण के समान है। बूम फ़ंक्शन का उपयोग करने के स्थान पर हम केवल - कुंजी "फ़ंक्शन ()" शब्द का उपयोग करते हैं।

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

Async / Wait का उपयोग करके वेब अनुरोधों को संसाधित करना

एक वादा-आधारित एपीआई, फ़ेच अस () के साथ वेब अनुरोधों को संसाधित करने के लिए एसिंक / प्रतीक्षा फ़ंक्शन के सबसे आम उपयोगों में से एक है। आप खोज करने के लिए हमारी जावास्क्रिप्ट शुरुआती मार्गदर्शिका में फ़ेच () का उपयोग करने के तरीके के बारे में अधिक पढ़ सकते हैं

आइए इस उदाहरण को लेते हैं:

हमारा कोड रिटर्न:

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

जब कोई वादा फ़ेच () फ़ंक्शन फ़ेच द्वारा वापस किया जाता है (), हम उस मान को जेएसओएन में बदल देते हैं। फिर हम सभी टिप्पणियों के नामों की सूची लाने के लिए ऑब्जेक्ट की पहचान करते हैं और इसे कंसोल पर प्रिंट करते हैं

त्रुटि को कैसे हैंडल करें का उपयोग करके किसी ईवेंट को सक्रिय करें h2>

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

हमारा कोड लौटाता है:

हमारे उदाहरण में, यदि कोई वापस आता है तो हमने .catch () का उपयोग किया है। इस मामले में, हम अपने कोड को यह बताने के लिए आवश्यकता ("त्रुटि") का उपयोग करते हैं कि एक त्रुटि हुई है।

यदि यह कथन निष्पादित किया जाता है, तो हमारी .catch () घोषणा शुरू हो जाती है और त्रुटि मुद्रित हो जाती है।

इसी तरह, एसिंक्रोनस फ़ंक्शन सिंटैक्स त्रुटियों का पता लगा सकते हैं:। res = प्रतीक्षा करें (`https://thisapidoesnotexist.app/cookies`); var कुकीनाम = प्रतीक्षा करें res.json (); कुकीनाम = कुकीनाम.मैप (कुकी => कुकी.नाम); निर्णय (कुकी नाम); } एसिंक्रोनस फंक्शन PrintCookies () {{ const टेस्ट = कुकीज रिट्रीव होने की प्रतीक्षा करेंकुकीज (); कंसोल.लॉग (गवाह); } कैच (त्रुटि) {console.log (त्रुटि); }} प्रिंटकुकीज़ ();

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

अब आप इसके लिए तैयार हैं एसिंक्रोनस जावास्क्रिप्ट फ़ंक्शंस का उपयोग करें / एक विशेषज्ञ की तरह प्रतीक्षा करें!