ES6 में पेश किया गया, प्रॉमिस आपको विभिन्न कॉलबैक फ़ंक्शंस से निपटने के बिना आसानी से एसिंक्रोनस कोड लिखने की अनुमति देता है। वादों के साथ, बहु-स्तरीय कॉलबैक फ़ंक्शंस के बारे में चिंता करने की कोई आवश्यकता नहीं है, जिन्हें लिखना और बनाए रखना दोनों कठिन हैं।
जावास्क्रिप्ट में एक और विशेषता है जो वादों का उपयोग करके अतुल्यकालिक कोड लिखना और भी आसान बनाती है:async/प्रतीक्षा फ़ंक्शन। ये आपको कोड लिखने की अनुमति देते हैं जो सिंक्रोनस दिखता है लेकिन वास्तव में एसिंक्रोनस रूटीन करता है।
इस गाइड में, हम चर्चा करने जा रहे हैं कि async/प्रतीक्षा फ़ंक्शन क्या है और आप इसे अपने कोड में कैसे उपयोग कर सकते हैं। चलिए शुरू करते हैं!
वादे:एक पुनश्चर्या
इससे पहले कि हम async/प्रतीक्षा फ़ंक्शंस के बारे में बात करना शुरू करें, हमें प्रॉमिस को फिर से लिखना होगा। एक वादा एक अतुल्यकालिक ऑपरेशन का प्रतिनिधित्व करता है। यह आपके कोड को बताता है कि एक ऑपरेशन किया जा रहा है और, यदि ऑपरेशन सफल होता है, तो एक मान वापस कर दिया जाएगा। अन्यथा, आपके शेष प्रोग्राम में एक त्रुटि लौटा दी जाएगी।
एक वादा एक मूल्य का प्रतिनिधित्व करता है जो ज्ञात नहीं है कि वादा कब बनाया गया था। एक वादा बस यही है:एक वादा कि भविष्य के मूल्यों को आपके कोड पर वापस भेज दिया जाएगा। क्योंकि वादा एक वस्तु है, इसे पूंजीकृत किया जाना चाहिए।
इस परिदृश्य पर विचार करें। आपको एपीआई से संसाधन पुनर्प्राप्त करने की आवश्यकता है। आपके अनुरोध को संसाधित करने में एक या दो सेकंड का समय लगेगा। उपयोगकर्ता को अनुरोध को संसाधित करने के लिए प्रतीक्षा करने के बजाय, आप अपने कोड को एक प्रॉमिस में स्थानांतरित कर सकते हैं ताकि आपका बाकी प्रोग्राम चालू रह सके।
इसका मतलब है कि डेटा पुनर्प्राप्त होने के दौरान आप अपनी वेबसाइट के उपयोगकर्ता इंटरफ़ेस का हिस्सा प्रस्तुत करना जारी रख सकते हैं। जैसे ही कोई मान लौटाया जाता है, प्रॉमिस उसे आपके मुख्य कार्यक्रम में भेज देगा।
यहां एक वादे का उदाहरण दिया गया है:
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
भेजें कुकीज =नया वादा (संकल्प => {सेटटाइमआउट (() => {संकल्प ("आपकी कुकीज़ भेज दी गई हैं!"); }, 1000);}); SendCookies.then (डेटा => {कंसोल. लॉग (डेटा);}) हमारा कोड लौटाता है:आपकी कुकीज़ भेज दी गई हैं! जब हम SendCookies.then () विधि को निष्पादित करते हैं, तो हमारा वादा शुरू हो जाता है। हमारा कार्यक्रम 1,000 मिलीसेकंड प्रतीक्षा करता है और फिर "आपकी कुकीज़ भेज दी गई है!" मान वापस भेज देता है। हमारे मुख्य कार्यक्रम के लिए।
Async और प्रतीक्षा का उपयोग कैसे करें
एक async/प्रतीक्षा फ़ंक्शन में, एक प्रतीक्षा कथन आपके कोड को उसके async फ़ंक्शन के भीतर निष्पादित करने से रोकता है जब तक कि कोई वादा वापस नहीं किया जाता है। यही कारण है कि डेवलपर्स अक्सर कहते हैं कि एसिंक्स/प्रतीक्षा फ़ंक्शन सिंक्रोनस दिखते हैं लेकिन एसिंक्रोनस कार्य करते हैं।
निम्नलिखित उदाहरण पर विचार करें:
फ़ंक्शन सेंडकुकीज़() { नया वादा लौटाएं (समाधान => {सेटटाइमआउट (() => {संकल्प ("आपकी कुकीज़ भेज दी गई हैं!"); }, 1000); });} async फ़ंक्शन मुख्य () { कॉन्स्ट सेंडमैसेज =प्रतीक्षा करें सेंडकुकीज (); कंसोल.लॉग(sendMessage);}मुख्य ();
हमारा कोड लौटाता है:आपकी कुकीज़ भेज दी गई हैं! हमारे SendCookies () फ़ंक्शन के लिए "आपकी कुकीज़ भेज दी गई हैं" मान वापस करने में 1,000 मिलीसेकंड लगते हैं। इस मामले में, हमने एक एसिंक फ़ंक्शन घोषित किया है ताकि हमारा कोड हल करने या अस्वीकार करने के वादे की प्रतीक्षा कर सके।
"Async" कीवर्ड हमारे कोड को बताता है कि हम अपने फ़ंक्शन में एक एसिंक्रोनस ऑपरेशन करना चाहते हैं। "प्रतीक्षा" कीवर्ड हमारे कोड को हमारे प्रोग्राम को निष्पादित करने से पहले SendCookies () प्रॉमिस की वापसी की प्रतीक्षा करने के लिए कहता है।
Async फ़ंक्शन हमेशा एक वादा लौटाते हैं।
एकाधिक चरणों के साथ Async और प्रतीक्षा का उपयोग करना
Async/प्रतीक्षा फ़ंक्शन का सबसे अधिक उपयोग तब किया जाता है जब कई वादे होते हैं जिनके साथ आपको काम करने की आवश्यकता होती है। इसे कभी-कभी प्रॉमिस चेनिंग कहा जाता है। ऐसा इसलिए है क्योंकि आपका कोड अगले चरण पर जाने से पहले प्रत्येक चरण में एक वादे के वापस आने की प्रतीक्षा करेगा:
फ़ंक्शन प्रोसेसऑर्डर() { नया वादा लौटाएं (समाधान => {सेटटाइमआउट (() => {संकल्प ("आपका कुकी ऑर्डर संसाधित किया जा रहा है ..."); }, 1000);});} फ़ंक्शन भेजें कुकीज ( ) { नया वादा लौटाएं (समाधान => {सेटटाइमआउट (() => {संकल्प ("आपकी कुकीज़ भेज दी गई हैं!"); }, 1000); });} async फ़ंक्शन मुख्य () { const प्रसंस्करण संदेश =प्रतीक्षा प्रक्रिया आदेश ( ); कंसोल.लॉग (भेजें संदेश); कॉन्स्ट सेंडमैसेज =प्रतीक्षा करें सेंडकुकीज (); console.log(sendMessage);} हमारा कोड लौटाता है:
आपका कुकी आदेश संसाधित किया जा रहा है...आपकी कुकी भेज दी गई हैं!
प्रत्येक चरण को पूरा होने में 1,000 मिलीसेकंड लगते हैं। हमारे SendCookies () फ़ंक्शन को तब तक निष्पादित नहीं किया जाता है जब तक कि हमारे processOrder () फ़ंक्शन से वादा वापस नहीं किया जाता है।
Async एक्सप्रेशन
आप तीन तरीकों से async/प्रतीक्षा फ़ंक्शन का उपयोग कर सकते हैं।
पहला तरीका वह दृष्टिकोण है जिसे हमने अपने पिछले उदाहरणों में दिखाया है:घोषित कार्यों के माध्यम से। हमारे उदाहरणों में हमने उन कार्यों की घोषणा की है जो एक वादा लौटाते हैं, फिर हमने उन कार्यों को निष्पादित करने के लिए "async" और "प्रतीक्षा" कीवर्ड का उपयोग किया है।
आप तीर फ़ंक्शन का उपयोग करके एक एसिंक फ़ंक्शन भी घोषित कर सकते हैं:
कॉन्स्ट मेन =एसिंक () => {कॉन्स्ट सेंडमैसेज =वेटिंग सेंडकुकीज (); console.log(sendMessage);}
यह कोड लौटाता है:आपकी कुकीज़ भेज दी गई हैं! यह हमारे पहले उदाहरण के समान है लेकिन मुख्य () फ़ंक्शन घोषित करने के बजाय, हमने एक तीर फ़ंक्शन का उपयोग किया है।
इसी तरह, आप फंक्शन एक्सप्रेशन सिंटैक्स का उपयोग कर सकते हैं:
कॉन्स्ट मेन =एसिंक फंक्शन () {कॉन्स्ट सेंडमैसेज =वेटिंग सेंडकुकीज (); console.log(sendMessage);}
यह कोड लौटाता है:आपकी कुकीज़ भेज दी गई हैं! जैसा कि आप देख सकते हैं, आउटपुट एक बार फिर वही है। फर्क सिर्फ इतना है कि हमने अपना कार्य घोषित किया है।
वास्तव में, यह वाक्य रचना हमारे पिछले उदाहरण के समान है। हमने तीर फ़ंक्शन का उपयोग करने के बजाय अभी "फ़ंक्शन ()" कीवर्ड का उपयोग किया है।
एसिंक/प्रतीक्षा फ़ंक्शन घोषित करने का कोई सबसे अच्छा तरीका नहीं है। यह सब इस बात पर निर्भर करता है कि आप किस प्रोग्राम को लिख रहे हैं और आपको कौन सा सिंटैक्स पसंद है। जबकि आप तर्क दे सकते हैं कि तीर फ़ंक्शन सबसे संक्षिप्त विधि है, अन्य मामलों में async/प्रतीक्षा फ़ंक्शन घोषित करने के अन्य तरीके बेहतर हो सकते हैं।
Async/प्रतीक्षा का उपयोग करके वेब अनुरोधों को संसाधित करना
एसिंक/प्रतीक्षा फ़ंक्शन के सबसे आम उपयोगों में से एक वेब अनुरोधों को एक एपीआई के साथ संसाधित करना है जो वादा-आधारित है, जैसे फ़ेच ()। आप जावास्क्रिप्ट लाने के लिए हमारे शुरुआती गाइड में फ़ेच () फ़ंक्शन का उपयोग करने के तरीके के बारे में अधिक पढ़ सकते हैं।
इस उदाहरण पर विचार करें:
async फंक्शन रिट्रीव कमेंट () { const res =वेटिंग फ़ेच ('https://jsonplaceholder.typicode.com/comments'); वर टिप्पणियाँ =प्रतीक्षा res.json (); टिप्पणियाँ =टिप्पणियाँ। मानचित्र (टिप्पणी => टिप्पणी। नाम); कंसोल.लॉग (टिप्पणियां);}टिप्पणियां पुनर्प्राप्त करें (); हमारा कोड लौटाता है:
["id Labore ex et quam Laborum", "quo vero reiciendis velit similique Earum" ...]
जब हम अपने पुनर्प्राप्ति () फ़ंक्शन को निष्पादित करते हैं, तो हम अपने फ़ेच () कथन के चलने की प्रतीक्षा करने के लिए "प्रतीक्षा" कीवर्ड का उपयोग करते हैं। इसका अर्थ है कि हमारा शेष कार्यक्रम तब तक जारी नहीं रहेगा जब तक कि हमारा वेब अनुरोध संसाधित नहीं हो जाता। ऐसा इसलिए है क्योंकि भ्रूण () फ़ंक्शन एक वादा लौटाता है।
जब कोई वादा प्राप्त () फ़ंक्शन द्वारा वापस किया जाता है, तो हम उस मान को परिवर्तित करते हैं जो उसने JSON में लौटाया है। फिर हम सभी टिप्पणियों के नामों की सूची प्राप्त करने के लिए ऑब्जेक्ट के माध्यम से मैप करते हैं और उस सूची को कंसोल पर प्रिंट करते हैं।
त्रुटि को कैसे हैंडल करें
ओह, मैं कैसे चाहता हूं कि कोड में त्रुटियां न हों। लेकिन वे करते हैं, और यह कुछ ऐसा है जिसके लिए हम डेवलपर्स को योजना बनानी होगी। एक एसिंक्रोनस फ़ंक्शन में, एरर हैंडलिंग को एक try…catch स्टेटमेंट का उपयोग करके सिंक्रोनाइज़ किया जाता है। इस कोड पर विचार करें:
async फंक्शन रिट्रीव कुकीज () { कॉन्स्ट रेस =वेटिंग फ़ेच ('https://thisapidoesnotexist.app/cookies'); वर कुकी नाम =प्रतीक्षा res.json (); कुकीनाम =कुकीनाम। मानचित्र (कुकी => कुकी.नाम); संकल्प (कुकी नाम);} async फ़ंक्शन प्रिंटकुकीज़ () {कॉन्स्ट कुकीज =रिट्रीव कुकीज (); कंसोल.लॉग(कुकीज़);}प्रिंटकुकीज़().कैच(res => कंसोल.लॉग(res.message)); हमारा कोड लौटाता है:
<पूर्व>संसाधन लाने का प्रयास करते समय नेटवर्क त्रुटि। जबकि हमारा कोड कार्यात्मक है, हम जिस एपीआई तक पहुंचने का प्रयास कर रहे हैं वह मौजूद नहीं है। इसका मतलब है कि हमारा वादा कोई डेटा वापस नहीं कर सकता है, इसलिए यह एक अस्वीकृत वादा लौटाता है।
हमारे उदाहरण में, हमने एक .catch () स्टेटमेंट का उपयोग किया है, यदि हमारे फ़ंक्शन द्वारा लौटाई गई त्रुटि को प्रिंट करने के लिए एक लौटाया जाता है। इस मामले में, हम अपने कोड को यह बताने के लिए अस्वीकार ('त्रुटि') का उपयोग करते हैं कि एक त्रुटि उत्पन्न हुई है।
यदि यह कथन निष्पादित किया जाता है, तो हमारा .catch() कथन क्रिया में आ जाता है और उस त्रुटि को प्रिंट करता है।
इसी तरह, async फ़ंक्शन सिंटैक्स त्रुटियों को पकड़ सकते हैं:
async फंक्शन रिट्रीव कुकीज () { कॉन्स्ट रेस =वेटिंग फ़ेच ('https://thisapidoesnotexist.app/cookies'); वर कुकी नाम =प्रतीक्षा res.json (); कुकीनाम =कुकीनाम। मानचित्र (कुकी => कुकी.नाम); संकल्प (कुकी नाम);} async फ़ंक्शन प्रिंटकुकीज़ () {कोशिश करें {कॉन्स्ट कुकीज़ =पुनर्प्राप्ति का इंतजार करें (); कंसोल.लॉग (कुकीज़); } पकड़ (त्रुटि) { कंसोल.लॉग (त्रुटि); }}प्रिंटकुकीज (); हमारा कोड लौटाता है:संसाधन लाने का प्रयास करते समय NetworkError। इस उदाहरण में, हमने यह जांचने के लिए एक कोशिश/पकड़ विवरण का उपयोग किया है कि क्या हमारी प्रतीक्षा पद्धति ने एक सफल वादा वापस किया है। फिर से, हमारा एपीआई मान्य नहीं है, जिसके कारण हमारा प्रोग्राम हमारे वादे को अस्वीकार कर देता है। जब ऐसा होता है, तो हमारे ट्राई/कैच ब्लॉक में "कैच" स्टेटमेंट निष्पादित होता है, जो हमारी त्रुटि को कंसोल में लॉग करता है।
निष्कर्ष
Async/प्रतीक्षा फ़ंक्शन आपको अपने कोड में अतुल्यकालिक संचालन लिखने में मदद करते हैं। जब एक एसिंक फ़ंक्शन घोषित किया जाता है, तो आप "प्रतीक्षा" कीवर्ड का उपयोग संचालन के समाधान के लिए प्रतीक्षा करने के लिए कर सकते हैं। प्रतीक्षित कीवर्ड का उपयोग एक ऐसे फ़ंक्शन के साथ किया जाना चाहिए जो एक वादा लौटाता है।
अब आप एक विशेषज्ञ की तरह async/प्रतीक्षा जावास्क्रिप्ट कार्यों का उपयोग शुरू करने के लिए तैयार हैं!