जावास्क्रिप्ट वादे को समझना

शुभ दिन, हेब्र! मैं आपको सुखजिंदर अरोड़ा का लेख "अंडरस्टैंडिंग प्रॉमिस इन जावास्क्रिप्ट" का अनुवाद प्रस्तुत करता हूं।



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

उसी लेखक से अतुल्यकालिक जावास्क्रिप्ट पर लेख के अनुवाद के लिए लिंक ।

जावास्क्रिप्ट एक एकल-थ्रेडेड प्रोग्रामिंग भाषा है, जिसका अर्थ है कि एक समय में एक काम किया जा सकता है। ES6 से पहले, हमने अतुल्यकालिक कार्यों का प्रबंधन करने के लिए कॉलबैक का उपयोग किया, जैसे कि नेटवर्क अनुरोध।

वादों का उपयोग करते हुए, हम "कॉलबैक नरक" से बच सकते हैं और अपने कोड को क्लीनर, अधिक पठनीय और समझने में आसान बना सकते हैं।

मान लें कि हम सर्वर से अतुल्यकालिक रूप से कुछ डेटा प्राप्त करना चाहते हैं, कॉलबैक का उपयोग करके हम कुछ इस तरह करेंगे:

getData(function(x){ console.log(x); getMoreData(x, function(y){ console.log(y); getSomeMoreData(y, function(z){ console.log(z); }); }); }); 

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

इसे हम "कॉलबैक नरक" कहते हैं, जहां प्रत्येक कॉलबैक को दूसरे के अंदर निहित किया जाता है, और प्रत्येक आंतरिक कॉलबैक इसके माता-पिता पर निर्भर करता है।

हम वादों का उपयोग करके उपरोक्त स्निपेट को फिर से लिख सकते हैं:

 getData() .then((x) => { console.log(x); return getMoreData(x); }) .then((y) => { console.log(y); return getSomeMoreData(y); }) .then((z) => { console.log(z); }); 

आप देख सकते हैं कि पहले कॉलबैक उदाहरण की तुलना में क्या अधिक पठनीय हो गया है।

वादे क्या हैं?

एक वादा (वादा) एक वस्तु है जिसमें एक अतुल्यकालिक ऑपरेशन के भविष्य के मूल्य शामिल हैं। उदाहरण के लिए, यदि आप सर्वर से कुछ डेटा का अनुरोध करते हैं, तो प्रॉमिस हमें यह डेटा प्राप्त करने का वादा करता है, जिसे हम भविष्य में उपयोग कर सकते हैं।

इन सभी तकनीकी चीजों में गोता लगाने से पहले, आइए वादों की शब्दावली को देखें।

प्रॉमिस स्टेट्स

जावास्क्रिप्ट में एक वादा, वास्तविक जीवन में एक वादे की तरह, 3 राज्य हैं। यह 1) अनसुलझे (लंबित), 2) हल / हल (पूर्ण) या 3) अस्वीकृत / अस्वीकृत हो सकते हैं।



अनारक्षित या लंबित - प्रॉमिस प्रतीक्षा करता है यदि परिणाम तैयार नहीं है। यही है, यह कुछ के पूरा होने की उम्मीद करता है (उदाहरण के लिए, एक अतुल्यकालिक ऑपरेशन के पूरा होने)।
हल किया गया या पूर्ण हुआ - परिणाम उपलब्ध होने पर प्रोमिस ने हल किया। यही है, कुछ ने अपने निष्पादन को पूरा किया (उदाहरण के लिए, एक अतुल्यकालिक ऑपरेशन) और सब कुछ ठीक हो गया।
निष्कासित - निष्पादन के दौरान कोई त्रुटि होने पर प्रोमिस अस्वीकार कर दिया गया।

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

प्रॉमिस बनाएं

ज्यादातर मामलों में, आप केवल वादों का उपयोग करेंगे, उन्हें नहीं बनाएंगे, लेकिन यह जानना महत्वपूर्ण है कि वे कैसे बनाए जाते हैं।

वाक्य रचना:

 const promise = new Promise((resolve, reject) => { ... }); 

हमने वादे निर्माता का उपयोग करके एक नया वादा किया, यह एक तर्क, एक कॉलबैक लेता है, जिसे कार्यकारी फ़ंक्शन के रूप में भी जाना जाता है, जो 2 कॉलबैक लेता है, हल करता है और अस्वीकार करता है ।

वादे के निर्माण के तुरंत बाद कार्यकारी कार्य किया जाता है। संकल्प () , और अस्वीकार द्वारा अस्वीकार करके एक वादा किया जाता है। उदाहरण के लिए:

 const promise = new Promise((resolve, reject) => { if(allWentWell) { resolve('  !'); } else { reject('-   '); } }); 

संकल्प () और अस्वीकार () एक तर्क लेते हैं, जो एक स्ट्रिंग, एक संख्या, एक तार्किक अभिव्यक्ति, एक सरणी या एक वस्तु हो सकती है।

आइए एक और उदाहरण देखें कि कैसे वादे किए जाते हैं।

 const promise = new Promise((resolve, reject) => { const randomNumber = Math.random(); setTimeout(() => { if(randomNumber < .6) { resolve('  !'); } else { reject('-   '); } }, 2000); }); 

यहाँ मैंने Promis constructor का उपयोग करके एक नया Promise बनाया। एक वादा अपने निर्माण के 2 सेकंड बाद निष्पादित या अस्वीकार कर दिया जाता है। यदि यादृच्छिक संख्या 6 से कम है और अन्य मामलों में खारिज कर दिया गया है तो एक वादा निष्पादित किया जाता है ।

जब एक वादा किया गया है, तो यह लंबित होगा और इसका मूल्य अपरिभाषित होगा।


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

सफल समापन:



वादा अस्वीकार:



नोट: वादा केवल एक बार निष्पादित या अस्वीकार किया जा सकता है। आगे कॉल () या अस्वीकार करने के लिए किसी भी तरह से वादे की स्थिति को प्रभावित नहीं करेगा। एक उदाहरण:

 const promise = new Promise((resolve, reject) => { resolve('Promise resolved'); //   reject('Promise rejected'); //       }); 

चूंकि संकल्प () को पहले कहा जाता था, अब वादे की स्थिति "पूर्ण" है। अस्वीकार करने के बाद की कॉल () किसी भी तरह से वादे की स्थिति को प्रभावित नहीं करेगी।

प्रोमिस का उपयोग करना

अब हम जानते हैं कि वादे कैसे बनाएं, अब पहले से बने वादे को लागू करने का तरीका जानें। हम तत्कालीन () और कैच () विधियों का उपयोग करके वादों का उपयोग करते हैं।

उदाहरण के लिए, लाने वाले API का डेटा क्वेरी करना, जो एक वादा लौटाता है।

.then () सिंटैक्स: वादा। सफलता (असफल, असफलता, वापसी)

successCallback कहा जाता है अगर वादा सफलतापूर्वक निष्पादित किया गया है। यह एक तर्क लेता है, जिसे हल करने के लिए पारित मूल्य है () ।

असफलता को कॉलबैक कहा जाता है यदि वादा अस्वीकार कर दिया गया हो। यह एक तर्क लेता है, जिसे अस्वीकार करने के लिए दिया गया मूल्य है () ।

एक उदाहरण:

 const promise = new Promise((resolve, reject) => { const randomNumber = Math.random(); if(randomNumber < .7) { resolve('  !'); } else { reject(new Error('-   ')); } }); promise.then((data) => { console.log(data); //  '  !' }, (error) => { console.log(error); //   } ); 

यदि वादे को निष्पादित किया गया था, तो उत्तराधिकार को हल करने के लिए पारित मूल्य के साथ कहा जाता है । और यदि वादे को अस्वीकार कर दिया गया था, तो विफलता को अस्वीकार करने के लिए पारित मूल्य के साथ कॉलबैक कहा जाता है ।

.कैच () सिंटैक्स: वादा.कैच (विफलता)

हम त्रुटियों को संभालने के लिए कैच () का उपयोग करते हैं। यह तब () विधि कॉलबैक के अंदर विफलता कॉलबैक के अंदर त्रुटि हैंडलिंग की तुलना में अधिक पठनीय है।

 const promise = new Promise((resolve, reject) => { reject(new Error('-   ')); }); promise .then((data) => { console.log(data); }) .catch((error) => { console.log(error); //   }); 

वादा श्रृंखला

तत्कालीन () और कैच () विधियाँ भी एक नया वादा वापस कर सकती हैं, जिसे पिछले तब () पद्धति के अंत में अन्य (तब) की श्रृंखला द्वारा संसाधित किया जा सकता है।

जब हम वादों का एक क्रम पूरा करना चाहते हैं तो हम वादों की एक श्रृंखला का उपयोग करते हैं।

उदाहरण के लिए:

 const promise1 = new Promise((resolve, reject) => { resolve('Promise1 '); }); const promise2 = new Promise((resolve, reject) => { resolve('Promise2 '); }); const promise3 = new Promise((resolve, reject) => { reject('Promise3 '); }); promise1 .then((data) => { console.log(data); // Promise1  return promise2; }) .then((data) => { console.log(data); // Promise2  return promise3; }) .then((data) => { console.log(data); }) .catch((error) => { console.log(error); // Promise3  }); 

तो यहाँ क्या हो रहा है?

जब वादा 1 पूरा हो जाता है, तो तत्कालीन () विधि कहा जाता है , जो वादा 2 लौटाता है।
अगला, जब वादा 2 पूरा हो जाता है , तब () को फिर से बुलाया जाता है और वादा 3 लौटाता है।

चूंकि वादा 3 खारिज कर दिया जाता है, इसके बजाय अगले () , कैच () कहा जाता है, जो वादा 3 की अस्वीकृति को संभालता है ।

नोट: एक नियम के रूप में, चेन में किसी भी वादे की अस्वीकृति को संभालने के लिए एक कैच () विधि पर्याप्त है, यदि यह विधि इसके अंत में है।

आम गलती

बहुत से नए लोग दूसरों के अंदर कुछ वादे करके गलती करते हैं। उदाहरण के लिए:

 const promise1 = new Promise((resolve, reject) => { resolve('Promise1 '); }); const promise2 = new Promise((resolve, reject) => { resolve('Promise2 '); }); const promise3 = new Promise((resolve, reject) => { reject('Promise3 '); }); promise1.then((data) => { console.log(data); // Promise1  promise2.then((data) => { console.log(data); // Promise2  promise3.then((data) => { console.log(data); }).catch((error) => { console.log(error); // Promise3  }); }).catch((error) => { console.log(error); }) }).catch((error) => { console.log(error); }); 

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

Promise.all ()

यह विधि वादों की एक सरणी लेती है और एक नया वादा लौटाती है जिसे तब निष्पादित किया जाएगा जब सरणी के अंदर सभी वादों को निष्पादित या खारिज कर दिया जाता है जैसे ही एक वादा खारिज कर दिया जाता है। उदाहरण के लिए:

 const promise1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('Promise1 '); }, 2000); }); const promise2 = new Promise((resolve, reject) => { setTimeout(() => { resolve('Promise2 '); }, 1500); }); Promise.all([promise1, promise2]) .then((data) => console.log(data[0], data[1])) .catch((error) => console.log(error)); 

यहां, तब () के अंदर तर्क एक सरणी है जिसमें वादों के मूल्यों को उसी क्रम में शामिल किया गया है जिसमें उन्हें Promise.all () में पारित किया गया था (केवल अगर सभी वादों को निष्पादित किया जाता है)

वादे को हस्तांतरित सरणी में पहले वादे की अस्वीकृति के कारण के साथ खारिज कर दिया गया है। उदाहरण के लिए:

 const promise1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('Promise1 '); }, 2000); }); const promise2 = new Promise((resolve, reject) => { setTimeout(() => { reject('Promise2 '); }, 1500); }); Promise.all([promise1, promise2]) .then((data) => console.log(data[0], data[1])) .catch((error) => console.log(error)); // Promise2  

यहां हमारे पास दो वादे हैं, जहां एक 2 सेकंड के बाद निष्पादित होता है और दूसरा 1.5 सेकंड के बाद विचलित होता है। जैसे ही दूसरा वादा खारिज किया जाता है, वादा ( वापसी ) से लौटा वादा पहले के इंतजार के बिना खारिज कर दिया जाता है।

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

नतीजतन, हमारे पास Promise.all () है , जो सभी वादों के सफल निष्पादन की प्रतीक्षा करता है, या वादों की सरणी में पहली विफलता का पता लगाने पर इसका निष्पादन पूरा करता है।

प्रॉमिस.्रेस ()

यह विधि वादों की एक सरणी को स्वीकार करती है और एक नया वादा लौटाती है जिसे सरणी में पूरा किए गए वादे के पूरा होते ही निष्पादित या अस्वीकृत कर दिया जाएगा यदि अस्वीकृत वादा पहले होता है। उदाहरण के लिए:

 const promise1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('Promise1 '); }, 1000); }); const promise2 = new Promise((resolve, reject) => { setTimeout(() => { reject('Promise2 '); }, 1500); }); Promise.race([promise1, promise2]) .then((data) => console.log(data)) // Promise1  .catch((error) => console.log(error)); 

यहां हमारे पास दो वादे हैं, जहां एक को 1 सेकंड के बाद निष्पादित किया जाता है, और दूसरा 1.5 सेकंड के बाद विचलित होता है। जैसे ही पहला वादा पूरा होता है, वादा (वादा) से लौटा हुआ वादा दूसरे वादे की स्थिति की प्रतीक्षा किए बिना पूरा हो जाएगा।

यहां, तब () को पारित किया गया डेटा पहले निष्पादित वाद का मूल्य है।

नतीजतन, Promise.race () पहले वादे का इंतजार करता है और लौटे वादे की स्थिति के रूप में अपनी स्थिति लेता है।

अनुवाद के लेखक की टिप्पणी: इसलिए नाम ही। दौड़ - दौड़

निष्कर्ष

हमने सीखा कि जावास्क्रिप्ट में क्या वादे हैं और वे क्या खाते हैं। वादे दो भागों से मिलकर 1) एक वादा और 2 बनाएँ) एक वादा का उपयोग करें। अधिकांश बार आप उन्हें बनाने के बजाय वादों का उपयोग करेंगे, लेकिन यह जानना महत्वपूर्ण है कि वे कैसे बनाए जाते हैं।

यह सब, मुझे आशा है कि यह लेख आपके लिए उपयोगी रहा है!