Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

जावास्क्रिप्ट वादों का उपयोग कैसे करें

जावास्क्रिप्ट में लिखने के लिए एसिंक्रोनस कोड एक दर्द हुआ करता था। अपने कोड में एसिंक्रोनस ऑपरेशंस लिखने के लिए, आपको कॉलबैक फ़ंक्शंस के कई स्तरों से निपटना होगा। आपने अपने कोड में जितने अधिक फ़ंक्शन पेश किए, उसे पढ़ना उतना ही कठिन था।

ES6 में, वादे बचाव के लिए आए। वादे जावास्क्रिप्ट में एसिंक्रोनस कोड को कुशलतापूर्वक लिखने का एक तरीका है।

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

वादा क्या है?

एक वादा एक वस्तु है जो एक प्रतिक्रिया देता है जिसे आप भविष्य में प्राप्त करना चाहते हैं।

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

एक वादा तीन राज्यों में से एक में मौजूद हो सकता है:

  • लंबित:एक वादा अभी तक पूरा नहीं हुआ है।
  • अस्वीकार:एक वादा एक मूल्य वापस करने में विफल रहा है।
  • पूरा हुआ:एक वादा पूरा हो गया है।

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

जब आप कोई वादा करते हैं, तो वह लंबित रहेगा। इस स्थिति में वादा तब तक मौजूद रहेगा जब तक कोई प्रतिक्रिया प्राप्त नहीं हो जाती है और वादा या तो पूरा हो जाता है या अस्वीकार कर दिया जाता है।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

JavaScript प्रॉमिस कैसे बनाएं

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

एक वादा बनाने के लिए, हमें एक वादा वस्तु बनाने की जरूरत है:

new Promise((resolve, reject) => { 
	// Your code here
});

वादे दो तर्कों को स्वीकार करते हैं:एक फ़ंक्शन जो वादे की सफलता को संभालता है और एक फ़ंक्शन जो एक असफल वादे को संभालता है। इसका मतलब है कि हमारा वादा इसके परिणाम के आधार पर अलग-अलग मूल्य लौटाएगा।

एक वादे में एक "अगर" कथन होना चाहिए जो यह निर्धारित करता है कि एक वादा सफलतापूर्वक निष्पादित किया गया है या नहीं। यदि कोई वादा सफलतापूर्वक निष्पादित नहीं हुआ है, तो उसे एक अस्वीकृत राज्य वादा वापस करना चाहिए:

new Promise((resolve, reject) => { 
	if (value is true) {
		resolve();
	} else {
		reject();
	}
});

एक नई जावास्क्रिप्ट फ़ाइल खोलें और निम्नलिखित कोड में कॉपी करें:

let returnName = new Promise((resolve, reject) => {
	let name;
	setTimeout(() => {
		name = "Cinnamon";

		if (name === "Cinnamon") {
			resolve(name);
		} else {
			reject("This promise has failed.");
		}
	}, 3000);
});

यह कोड Cinnamon . नाम देता है हमारे मुख्य कार्यक्रम के लिए जब हम वादा कहते हैं। इस कोड को चलने में तीन सेकंड या 3,000 मिलीसेकंड का समय लगता है। इसका मतलब है कि जब हम अपना वादा कहते हैं तो यह तीन सेकंड के लिए लंबित रहेगा। वादा तय होने के बाद, एक हल किया गया या अस्वीकृत वादा हमारे मुख्य कार्यक्रम में वापस कर दिया जाएगा।

यदि "नाम" "दालचीनी" के बराबर है, तो हमारा वादा सफलतापूर्वक हल हो गया है; नहीं तो हमारा वादा ठुकरा दिया जाएगा। इस उदाहरण में, "नाम" "दालचीनी" पर सेट है। क्योंकि हमने एक नाम निर्दिष्ट किया है, हमारा वादा अपने आप हल हो जाता है।

वादों के साथ

फिर () और कैच ()

हमारा कोड अभी तक निष्पादित नहीं हुआ है। हमें अपनी वादा वस्तु को कॉल करना होगा:

returnName.then(data => {
	console.log(data);
});

then() कीवर्ड हमें अपने वादे से प्रतिक्रिया प्राप्त करने की अनुमति देता है। वादा पूरा होने के बाद इसे बुलाया जाता है। इस उदाहरण में, हम data . की सामग्री का प्रिंट आउट लेते हैं , जो हमारे वादे से कंसोल पर लौटाई गई प्रतिक्रिया है।

हमारा कोड रिटर्न:दालचीनी।

then() केवल सफल वादों को संभालता है। अगर हमारा वादा ठुकरा दिया जाए तो क्या होगा? यहीं से catch() विधि आती है।

आप कई then() . बता सकते हैं एक वादे के अंदर बयान। इसे वादा जंजीर कहा जाता है। चेनिंग कैसे काम करती है, यह समझाने के लिए आइए एक उदाहरण का उपयोग करें:

returnName.then(data => {
	console.log(data);
}).then(() => {
	console.log("This function is over!");

यह कोड वापस आ जाएगा:

दालचीनी

यह समारोह समाप्त हो गया है।

तब () कथनों को उस क्रम में निष्पादित किया जाता है जिस क्रम में वे एक वादा निर्माता के अंदर निर्दिष्ट होते हैं।

catch() विधि एक वादे से जुड़ी है जैसे then() तरीका। आइए एक हैंडलर बनाएं जो हमारे नाम के उदाहरण के लिए अस्वीकृत वादे का प्रबंधन करता है:

returnName.then(data => {
	console.log(data);
}).catch(error => {
	console.log(error);
});

हमने एक catch() . पर काम किया है हमारे then() . के बाद स्टेटमेंट बयान। ध्यान दें कि हम अपने वादे कोड के बिल्कुल अंत में एक अर्धविराम (;) का उपयोग करते हैं। आपको then() . के बाद अर्धविराम निर्दिष्ट नहीं करना चाहिए विधि यदि आप catch() . का उपयोग कर रहे हैं . यह जावास्क्रिप्ट को बताएगा कि तब () और कैच () अलग हैं, और इसलिए आपके कोड में एक त्रुटि वापस आ जाएगी।

यदि हमारा वादा अस्वीकार कर दिया जाता है, तो कैच () स्टेटमेंट की सामग्री चल जाएगी।

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

दालचीनी

मूल्य Cinnamon लौटा दिया जाता है क्योंकि हमारा वादा सफलतापूर्वक हल हो जाता है। यदि हमारे वादे में "नाम" का मूल्य "दालचीनी" नहीं था, तो एक त्रुटि वापस आ जाएगी:

पकड़ में न आया (वादे में) यह वादा विफल हो गया है।

हमने त्रुटि संदेश निर्दिष्ट किया:"यह वादा विफल हो गया है।" हमारे वादे के अंदर हमारे अस्वीकार () फ़ंक्शन में।

आखिरकार() वादों के साथ

यदि आप किसी वादे के पूरा होने के बाद कोड के ब्लॉक को निष्पादित करना चाहते हैं, तो क्या होगा, भले ही वादा सफल हुआ या विफल?

यहीं पर finally() कथन काम आता है। finally() कथन चलता है कि कोई वादा पूरा हुआ या नहीं। आइए अंतिम कथन का उपयोग करने के लिए हमारे वादे कॉल को अपडेट करें:

returnName.then(data => {
	console.log(data);
}).catch(error => {
	console.log(error);
}).finally(() => {
	console.log("The returnName promise has been executed.");
});

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

दालचीनी

रिटर्ननाम वादा निष्पादित किया गया है।

हमारा वादा Cinnamon लौटाता है क्योंकि यह सफल रहा। finally() . की सामग्री फिर स्टेटमेंट निष्पादित किया जाता है, जो हमारे कंसोल पर एक और संदेश देता है।

निष्कर्ष

जावास्क्रिप्ट वादे आपको स्वच्छ अतुल्यकालिक कोड लिखने की अनुमति देते हैं।

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

यहां एक चुनौती है:एक वादा लिखें जो एक वेब अनुरोध करता है और अपनी प्रतिक्रिया देता है। ऐसा करने के लिए, आप अनुरोध करने के लिए fetch() API का उपयोग करना चाहेंगे। यह अनुरोध एक वादे के भीतर संलग्न किया जाना चाहिए। आपको ऐसा कोड लिखना चाहिए जो वादे के सफल होने या विफल होने पर दोनों को संभालता है।

यदि आप और आगे जाना चाहते हैं, तो JavaScript async फ़ंक्शन देखें। इनका उपयोग एसिंक्रोनस कोड लिखने के लिए किया जा सकता है और आमतौर पर प्रॉमिस के साथ उपयोग किया जाता है।

अब आप एक विशेषज्ञ की तरह जावास्क्रिप्ट वादों को लिखना शुरू करने के लिए तैयार हैं!


  1. HTML पृष्ठ को पुनर्निर्देशित करने के लिए जावास्क्रिप्ट का उपयोग कैसे करें?

    हो सकता है कि आपने एक ऐसी स्थिति का सामना किया हो जहां आपने किसी पृष्ठ X पर पहुंचने के लिए URL पर क्लिक किया हो लेकिन आंतरिक रूप से आपको दूसरे पृष्ठ Y पर निर्देशित किया गया था। यह पृष्ठ पुनर्निर्देशन के कारण होता है। क्लाइंट साइड पर जावास्क्रिप्ट का उपयोग करके पेज रीडायरेक्ट करना काफी आसान है। अपनी

  1. जावास्क्रिप्ट वादे

    जावास्क्रिप्ट में वादे हमें अतुल्यकालिक संचालन करने की अनुमति देते हैं जहां मूल्य उन्नत में ज्ञात नहीं होता है जब वादा बनाया जा रहा था। एक वादे में तीन राज्य लंबित, पूरे और अस्वीकृत हो सकते हैं। जावास्क्रिप्ट में वादों के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html lang="en&q

  1. जावास्क्रिप्ट कार्यों में नामित तर्कों का उपयोग कैसे करें?

    जावास्क्रिप्ट फ़ंक्शंस में नामित तर्कों का उपयोग करने के लिए निम्नलिखित कोड है - उदाहरण <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <