👨🏻‍💼 🎀 🤴 जावास्क्रिप्ट वादा करता है 🔈 👶🏽 🖊️

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

देवियों और सज्जनों, वेब विकास की दुनिया में एक भव्य आयोजन के लिए तैयार हो जाइए ...

[ड्रम रोल]

वादा जावास्क्रिप्ट में देशी बन जाते हैं!

[हर जगह आतिशबाजी की गर्जना, भीड़ खुश हो जाती है]

फिलहाल, आपको निम्न श्रेणियों में से एक के लिए जिम्मेदार ठहराया जा सकता है:

लोग चारों ओर खुशी मनाते हैं, लेकिन आप समझ नहीं सकते हैं कि विजय का कारण क्या है। शायद आप अभी भी इन "प्रॉमिस" को सामान्य रूप से पूरी तरह से पकड़ नहीं सकते हैं। आप झकझोरने की कोशिश करते हैं, लेकिन आपके कंधों पर कई गुना चमकते कंफ़ेद्दी का भार होता है। यदि हां, तो चिंता न करें, जब तक मैंने इस चीज को समझने के बारे में चिंता करना बंद नहीं किया तब तक मुझे काम करने में सालों लग गए। आपको शायद यहां शुरू करना चाहिए।
तुम चिल्लाती हो। आपने पहले वादों से इन चीजों का उपयोग किया था, लेकिन आपको यह विचार करने के लिए नहीं दिया गया था कि सभी उपलब्ध कार्यान्वयन थोड़ा अलग एपीआई हैं। जावास्क्रिप्ट में आधिकारिक कार्यान्वयन हमें किस एपीआई के साथ प्रदान करेगा? तब आप शायद यहाँ हैं ।
आप सभी चीजों के बारे में जानते हैं, और इन सिंपलटन के द्रव्यमान में उल्लास से घिरते हैं, अपने चारों ओर सरपट दौड़ते हैं जैसे कि यह उनके लिए खबर थी। अपनी गति का आनंद लेने के लिए कुछ समय लें, और फिर एपीआई संदर्भ के लिए तुरंत आश्वस्त कदम का पालन करें।

हर कोई क्यों नाच रहा है?

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

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

संभवतः, इससे खुद को बचाने के लिए, आपने एक इवेंट मॉडल और कॉलबैक की एक श्रृंखला का उपयोग किया। उदाहरण के लिए:

var img1 = document.querySelector('.img-1'); img1.addEventListener('load', function() { // ,   }); img1.addEventListener('error', function() { // ,   });

कोई अवरोधक कोड नहीं है। हमने एक छवि ली, उस पर श्रोताओं की एक जोड़ी लटका दी, और वह यह है। इसके अलावा, जब तक कि कोई घटना नहीं हो जाती, जावास्क्रिप्ट अपने निष्पादन को रोक सकता है।

दुर्भाग्य से, ऊपर के उदाहरण में, यह संभव है कि घटनाएँ तब होंगी जब हम उन्हें सुनना शुरू करेंगे। इसलिए, हमें complete छवि संपत्ति का उपयोग करके इस उदाहरण को दर्ज करना होगा:

 var img1 = document.querySelector('.img-1'); function loaded() { // ,   } if (img1.complete) { loaded(); } else { img1.addEventListener('load', loaded); } img1.addEventListener('error', function() { // ,   });

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

इवेंट हमेशा सबसे अच्छा विकल्प नहीं होते हैं।

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

  img1.callThisIfLoadedOrWhenLoaded(function() { //  }).orIfFailedCallThis(function() { //  }); // … whenAllTheseHaveLoaded([img1, img2]).callThis(function() { //   }).orIfSomeFailedCallThis(function() { //     });

यह वही है जो वादे के लिए जिम्मेदार हैं, लेकिन केवल अधिक सुसंगत और शब्दार्थ नामों के तहत। यदि HTML छवि में एक ready तरीका था जो एक वादा लौटाता है, तो हम निम्नलिखित कर सकते हैं:

 img1.ready().then(function() { //  }, function() { //    }); // … Promise.all([img1.ready(), img2.ready()]).then(function() { //   }, function() { //      });

इसके मूल में, इसके अपवाद के साथ वादे घटनाओं के समान हैं:

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

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

वचन शब्दावली

डोमिनिक डेनिकोला ने इस लेख का पहला मसौदा पढ़ा और मुझे इस्तेमाल की गई शब्दावली के लिए एक हिस्सेदारी दी। सजा में, उसने मुझे संभावित " शर्तों और परिणामों के वादों " पर सौ गुना प्रावधानों को पढ़ा और मेरे माता-पिता से माफी मांगने वाला पत्र लिखा। इसके बावजूद, मैं अभी भी मिला हुआ हूं, और मैं निम्नलिखित मूल अवधारणाओं पर आया हूं:

एक वादा हो सकता है:

पूरा - सफलतापूर्वक पूरा हुआ
अस्वीकृत - एक त्रुटि के साथ पूरा हुआ
लंबित - पूरा नहीं हुआ
बसे - किसी भी परिणाम के साथ पूर्ण

then पद्धति के समान वस्तु के वादे का वर्णन करने के लिए विनिर्देशन thenable शब्द का उपयोग करता है। लेकिन यह शब्द मुझे पूर्व-अंग्रेजी फुटबॉल प्रबंधक टेरी वेनबल्स की याद दिलाता है, इसलिए मैं इसका उपयोग शायद ही कभी करूंगा।

वादा जावास्क्रिप्ट में बनाया जाता है!

इन जैसे पुस्तकालयों के रूप में कुछ समय के लिए वादे पहले से ही हमें घेरे हुए हैं:

ऊपर के पुस्तकालयों से वादा किया गया है और जावास्क्रिप्ट में निर्मित उन मानकीकृत वादों / A + विनिर्देशन में वर्णित व्यवहार का पालन करते हैं। यदि आप jQuery का उपयोग करते हैं, तो इसमें सामान्य रूप से Deffered नामक कुछ है। जो कुछ भी था, डेफर्ड के वादे / ए + विनिर्देश के साथ थोड़ा असंगत हैं, जो उन्हें कम उपयुक्त बनाता है, इसलिए अपने कान को तेज रखें। JQuery भी प्रकार का वादा है , लेकिन यह केवल Deffered के खेतों का एक सबसेट है जिसमें समान समस्याएं हैं।

हालांकि ये सभी वादे कार्यान्वयन मानक का पालन करते हैं, उनके एपीआई अलग हैं। मूल वादा API RSVP.js. के समान है।

 var promise = new Promise(function(resolve, reject) { //    ,   , … if (/* ..    */) { resolve("!"); } else { reject(Error("")); } });

वादा निर्माता एक तर्क लेता है - दो मापदंडों के साथ एक कॉलबैक फ़ंक्शन: resolve और reject । यह सरल है, आप कॉलबैक के अंदर कोई भी अतुल्यकालिक संचालन करते हैं, फिर आप सफलता के मामले में resolve कहते हैं, या विफलता के मामले में reject ।

अच्छे पुराने जावास्क्रिप्ट में throw तरह, अस्वीकार करने के लिए एक त्रुटि ऑब्जेक्ट पास करने की आवश्यकता नहीं है। त्रुटि ऑब्जेक्ट बनाने का लाभ यह है कि कंसोल में कॉल स्टैक ट्रेस होने से कोड को डीबग करना अधिक सुखद होता है।

इसके अलावा, वादा निम्नानुसार किया जा सकता है:

 promise.then(function(result) { console.log(result); // " !" }, function(err) { console.log(err); // : "" });

डोम में वादे का मानकीकरण "फ्यूचर्स" के रूप में शुरू हुआ, बाद में इसका नाम बदलकर "वादा" कर दिया गया, और अंत में इसे जावास्क्रिप्ट विनिर्देश में स्थानांतरित कर दिया गया। मुख्य रूप से दस्तावेज़ के ऑब्जेक्ट मॉडल से अलग जावास्क्रिप्ट में वादे को लागू करने का विचार सुंदर है, क्योंकि उन्हें गैर-ब्राउज़र वातावरण जैसे कि Node.js. में पहुँचा जा सकता है।

हालाँकि वे विशुद्ध रूप से एक जावास्क्रिप्ट सुविधा में बदल गए, लेकिन डोम उन्हें पूर्ण रूप से उपयोग करने में संकोच नहीं करते। वास्तव में, एसिंक्रोनस पर आधारित ऑल-न्यू DOM API, प्रॉमिस का उपयोग करेगा। अब यह पहले से ही कोटा प्रबंधन , फॉन्ट लोड इवेंट्स , सर्विसवॉकर , वेब मिडी , स्ट्रीम और अन्य एपीआई के साथ हो रहा है।

ब्राउज़र का समर्थन

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

क्रोम में है। डाउनलोड कैनरी , वहाँ वादे डिफ़ॉल्ट रूप से शामिल हैं। अन्यथा, यदि आप फ़ायरफ़ॉक्स के अनुयायियों के रैंक से एक सिपाही हैं, तो नवीनतम रात के निर्माण को डाउनलोड करें, इसमें वादे भी हैं।

वर्तमान में, वादों का कार्यान्वयन कहीं भी पूरा नहीं हुआ है। आप बगज़िला पर फ़ायरफ़ॉक्स के विकास को ट्रैक कर सकते हैं, और नवीनतम घटनाओं के बराबर रखने के लिए क्रोम नवाचार बोर्ड ।

वादों को ठीक से काम करने के लिए या अन्य ब्राउज़रों और Node.js के वादों को जोड़ने के लिए, एक पॉलीफ़िल का उपयोग करें।

अन्य पुस्तकालयों के साथ संगतता

जावास्क्रिप्ट वादा एपीआई then विधि के बिना पूरा नहीं होता है, क्योंकि यह एक वादा जैसी वस्तु के साथ होना चाहिए (वादा शब्दावली में इसे तब भी कहा जाता है)। एक Promise.cast विधि भी है जो इनलाइन और कस्टम प्रॉमिस जैसी वस्तुओं के बीच की सीमाओं को मिटा देती है। इसलिए, यदि आप एक पुस्तकालय का उपयोग करते हैं जो कि Q जैसे वादे लौटाता है, तो ठीक है, वे मूल JavaScrip वादों के साथ ठीक काम करेंगे।

लेकिन, जैसा कि मैंने चेतावनी दी थी, JQuery के डिफ्रेड्स थोड़ा अलग हैं ... अलग। सौभाग्य से, आप उन्हें मानक पर ला सकते हैं:

 var jsPromise = Promise.cast($.ajax('/whatever.json'));

यहां jQuery का Riva $.ajax वापस आ गया है। लेकिन जब तक यह एक then विधि है, Promist.cast एक वास्तविक वादा में बदल सकता है। जैसा कि हो सकता है कि कई बार, Deffered ने अपने कॉलबैक में बहुत से तर्क दिए:

 var jqDeferred = $.ajax('/whatever.json'); jqDeferred.then(function(response, statusText, xhrObj) { // ... }, function(xhrObj, textStatus, err) { // ... });     JS     : jsPromise.then(function(response) { // ... }, function(xhrObj) { // ... });

सौभाग्य से, ज्यादातर मामलों में यह वही होता है जिसकी आपको आवश्यकता होती है, और आपको उसकी आवश्यकता होती है। यह जानना भी महत्वपूर्ण है कि reject करने के लिए jQuery को किसी त्रुटि वस्तु को पारित करने के लिए सम्मेलन नहीं करना चाहिए।

एसिंक्रोनस कोड आसान बनाता है

तो, चलो कुछ चीजों को कोड करते हैं। मान लें कि हम चाहते हैं:

लोड इंगित करने के लिए घूर्णन आइकन दिखाएं
एक कहानी के लिए कुछ JSON का अनुरोध करें जिसमें प्रत्येक अध्याय के लिए एक शीर्षक और URL का संग्रह हो
पृष्ठ में शीर्षक जोड़ें
सभी अध्यायों से अनुरोध करें
उन सभी को प्रदर्शित करें
डाउनलोड सूचक छुपाएं

... और अगर रास्ते में कुछ गलत हो गया तो उपयोगकर्ता को सूचित करें। हम एक त्रुटि के बाद संकेतक को रोकना चाहते हैं ताकि उपयोगकर्ता को स्थायी रोटेशन से चक्कर आने का कारण न हो।

बेशक, आप उस सामग्री को डायनामिक रूप से लोड नहीं करना चाहते हैं जो HTML के रूप में प्रस्तुत करने के लिए तेज़ है , लेकिन तृतीय-पक्ष API के साथ काम करते समय हमारा टेम्पलेट अच्छा है: आप बहुत अनुरोध करते हैं, तब आप डेटा के साथ काम करते हैं जब आप उन सभी को प्राप्त करते हैं।

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

XMLHttpRequest एक वादा करता है

पुराने APIs को वादों का उपयोग करके अद्यतन किया जाएगा, यदि संभव हो तो बिना पिछड़े संगतता को खोए। XMLHttpRequest पहला उम्मीदवार है, लेकिन अभी के लिए, GET अनुरोध करने के लिए एक सरल फ़ंक्शन लिखें:

 function get(url) { //   . return new Promise(function(resolve, reject) { //   XHR  var req = new XMLHttpRequest(); req.open('GET', url); req.onload = function() { //      404'  //     if (req.status == 200) { //      resolve(req.response); } else { // ,     //       reject(Error(req.statusText)); } }; //    req.onerror = function() { reject(Error("Network Error")); }; //   req.send(); }); }

अब इसका उपयोग करते हैं:

 get('story.json').then(function(response) { console.log("!", response); }, function(error) { console.error("!", error); });

अब हम XMLHttpRequest टाइप किए बिना HTTP अनुरोध कर सकते हैं, जो मुझे बहुत खुश करता है, क्योंकि XMLHttpRequest के ऊंट संकेतन का संक्षिप्त रूप वास्तव में मेरे जीवन को विषाक्त कर रहा है।

कॉल चेन

then यह कहानी का अंत नहीं है, आप then कॉल-टू-एंड-एंड-टू-ट्रांसफ़ॉर्म कर सकते हैं, लौटे मूल्यों को बदल सकते हैं या एक के बाद एक अतिरिक्त अतुल्यकालिक क्रियाएं कर सकते हैं।

पाइपलाइन मूल्य प्रसंस्करण

आप केवल एक नया रिटर्न देकर पाइपलाइन के साथ मूल्य को संशोधित कर सकते हैं:

 var promise = new Promise(function(resolve, reject) { resolve(1); }); promise.then(function(val) { console.log(val); // 1 return val + 2; }).then(function(val) { console.log(val); // 3 });

अधिक व्यावहारिक उदाहरण के लिए, आइए हम वापस जाएं:

 get('story.json').then(function(response) { console.log("!", response); });

इसका जवाब हमें JSON प्रारूप में मिला, लेकिन हमें सामग्री प्रदर्शित करने के लिए सरल पाठ की आवश्यकता है। हम अपने उत्तर की responseType कर सकते हैं, लेकिन हम इसे वादों की अद्भुत दुनिया से सैर के लिए भी भेज सकते हैं:

 get('story.json').then(function(response) { return JSON.parse(response); }).then(function(response) { console.log("  JSON!", response); });

वैसे, JSON.parse एक तर्क लेता है और संसाधित मूल्य लौटाता है, और हम बस इसके लिए एक लिंक दे सकते हैं:

 get('story.json').then(JSON.parse).then(function(response) { console.log("  JSON!", response); });

वास्तव में, हम आसानी से चीनी getJSON फ़ंक्शन को स्केच कर सकते हैं:

 function getJSON(url) { return get(url).then(JSON.parse); }

getJSON अभी भी एक वादा लौटाता है क्योंकि यह डेटा को बाहर निकालता है और JSON प्रतिक्रिया को पार्स करता है।

अतुल्यकालिक घटना कतार

then आप एसिंक्रोनस क्रियाओं को क्रमिक रूप से करने के लिए कॉल कर सकते हैं।

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

 getJSON('story.json').then(function(story) { return getJSON(story.chapterUrls[0]); }).then(function(chapter1) { console.log("  !", chapter1); });

यहां हम story.json लिए एक अतुल्यकालिक अनुरोध करते हैं, और जब हमें प्रतिक्रिया में URL का एक सेट मिलता है, तो हम उनमें से पहले का अनुरोध करते हैं। यहां हम स्पष्ट रूप से देखते हैं कि एक सेब एक सेब के पेड़ से कितनी दूर वापस जा सकता है, सामान्य कॉलबैक पैटर्न पर वादों का लाभ आपकी आंखों को नुकसान पहुंचाता है। आप लेख अनुरोध के तर्क को एक अलग विधि में रख सकते हैं:

 var storyPromise; function getChapter(i) { storyPromise = storyPromise || getJSON('story.json'); return storyPromise.then(function(story) { return getJSON(story.chapterUrls[i]); }) } //     : getChapter(0).then(function(chapter) { console.log(chapter); return getChapter(1); }).then(function(chapter) { console.log(chapter); });

हम story.json लोड नहीं करते हैं। जब तक कि पहली कॉल को getChapter , और निम्न कॉल करने के लिए getChapter इतिहास को लोड करने के वादे का पुन: उपयोग करता है जो पहले ही पूरा हो चुका है और अतिरिक्त अनुरोध नहीं करता है। ओह, ये वादे!

हैंडलिंग में त्रुटि

जैसा कि हमने पहले देखा, then दो तर्क लेते हैं, एक सफल समापन के लिए, दूसरा त्रुटि के मामले में कहा जाता है (वादों की शब्दावली में पूर्ण और अस्वीकार):

 get('story.json').then(function(response) { console.log("!", response); }, function(error) { console.log("!", error); });

आप catch भी उपयोग कर सकते हैं:

 get('story.json').then(function(response) { console.log("!", response); }).catch(function(error) { console.log("!", error); });

इस विधि के बारे में कुछ खास नहीं है, यह then(undefined, func) लिए अधिक पठनीय चीनी है। ध्यान दें कि ऊपर दिए गए कोड के दो टुकड़े समान नहीं हैं; उत्तरार्द्ध निम्नलिखित के बराबर है:

  get('story.json').then(function(response) { console.log("!", response); }).then(undefined, function(error) { console.log("!", error); });

यह प्रतीत होता है कि छोटा अंतर वास्तव में एक बहुत शक्तिशाली अवधारणा है। एक वादा (अस्वीकृति) की अस्वीकृति then कॉल की श्रृंखला को पारित कर दिया जाएगा (या catch , जो लगभग एक ही बात है) जब तक कि यह पहली त्रुटि हैंडलर का सामना न करे। then(func1, func2) के मामले में, func1 और func2 दोनों को कभी नहीं कहा जाएगा। लेकिन then(func1).catch(func2) श्रृंखला में, दोनों फ़ंक्शन को कॉल किया जा सकता है यदि वादा func1 । निम्नलिखित कोड के साथ मज़े करें:

 asyncThing1().then(function() { return asyncThing2(); }).then(function() { return asyncThing3(); }).catch(function(err) { return asyncRecovery1(); }).then(function() { return asyncThing4(); }, function(err) { return asyncRecovery2(); }).catch(function(err) { console.log("Don't worry about it"); }).then(function() { console.log("All done!"); });

त्रुटि से निपटने की प्रक्रिया मानक try/catch समान है, try ब्लॉक में हुई त्रुटि तुरंत catch पारित हो जाती है। यहाँ ऊपर के कोड में क्या हो रहा है (मैं फ़्लोचार्ट से प्यार करता हूँ) का एक फ़्लोचार्ट है:

सफलतापूर्वक पूर्ण किए गए वादे और विफलता के मामले में लाल तीर के मामले में हरे तीर का पालन करें।

जावास्क्रिप्ट अपवाद और वादे

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

 var jsonPromise = new Promise(function(resolve, reject) { // JSON.parse     //  JSON,     reject': resolve(JSON.parse("This ain't JSON")); }); jsonPromise.then(function(data) { //     : console.log("!", data); }).catch(function(err) { //   : console.log("!", err); });

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

एक ही बात तब होगी जब एक अपवाद को कॉलबैक में फेंक दिया जाता है:

 get('/').then(JSON.parse).then(function() { //    , '/'     JSON //   JSON.parse   console.log("!", data); }).catch(function(err) { //   : console.log("!", err); });

व्यवहार में त्रुटि से निपटने

हमारी कहानी के मामले में, अध्यायों में विखंडित, हम एक त्रुटि के उपयोगकर्ता को सूचित करने के लिए catch का उपयोग कर सकते हैं:

 getJSON('story.json').then(function(story) { return getJSON(story.chapterUrls[0]); }).then(function(chapter1) { addHtmlToPage(chapter1.html); }).catch(function() { addTextToPage("  "); }).then(function() { document.querySelector('.spinner').style.display = 'none'; });

अगर story.chapterUrls[0] लिए अनुरोध। , को भी नजरअंदाज किया जाता है। निष्पादन तुरंत पहली त्रुटि प्रसंस्करण कॉलबैक पर जाएगा। परिणामस्वरूप, उपयोगकर्ता "अध्याय प्रदर्शित करने में असमर्थ" संदेश को देखेगा यदि पिछले कॉलबैक में से किसी में कुछ गलत हो जाता है।

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

 try { var story = getJSONSync('story.json'); var chapter1 = getJSONSync(story.chapterUrls[0]); addHtmlToPage(chapter1.html); } catch (e) { addTextToPage("  "); } document.querySelector('.spinner').style.display = 'none';

शायद आप थोड़ी देर पहले त्रुटि को पकड़ना चाहते हैं, उदाहरण के लिए, लॉग इन करने के लिए कि क्या हो रहा है। ऐसा करने के लिए, बस इस स्थान पर त्रुटि को पुन: उत्पन्न करें। हम इसे अपने getJSON विधि में कर सकते हैं:

 function getJSON(url) { return get(url).then(JSON.parse).catch(function(err) { console.log("getJSON  ", url, err); throw err; }); }

इसलिए, हम एक अध्याय लाने में सफल रहे, लेकिन हम उन सभी को देखना चाहते हैं। चलो करते हैं।

कंसीडर और कतार - दोनों का सर्वश्रेष्ठ लें

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

 try { var story = getJSONSync('story.json'); addHtmlToPage(story.heading); story.chapterUrls.forEach(function(chapterUrl) { var chapter = getJSONSync(chapterUrl); addHtmlToPage(chapter.html); }); addTextToPage("All done"); } catch (err) { addTextToPage("- : " + err.message); } document.querySelector('.spinner').style.display = 'none';

यह काम करता है ! लेकिन सभी कार्यों को सिंक्रोनाइज़ किया जाता है और बूट समय पर ब्राउज़र को ब्लॉक किया जाता है। इस कोड को अतुल्यकालिक बनाने के लिए, हम then एक-एक करके कार्यों को पूरा करने के लिए उपयोग करेंगे।

 getJSON('story.json').then(function(story) { addHtmlToPage(story.heading); // TODO:       story.chapterUrls }).then(function() { //    ! addTextToPage(" "); }).catch(function(err) { //   ,     addTextToPage("- : " + err.message); }).then(function() { //     document.querySelector('.spinner').style.display = 'none'; });

लेकिन हम क्रम में सभी अध्यायों के आसपास कैसे पहुंचते हैं? यह काम नहीं करेगा:

 story.chapterUrls.forEach(function(chapterUrl) { //   getJSON(chapterUrl).then(function(chapter) { //      addHtmlToPage(chapter.html); }); });

forEach का अतुल्यकालिक से कोई लेना-देना नहीं है, और हमारे अध्यायों को पेज पर यादृच्छिक क्रम में जोड़ा जाएगा क्योंकि वे लोड करते हैं, जैसे कि "पल्प फिक्शन" लिखा गया था। हमारे पास पल्प फिक्शन नहीं है, तो चलिए इसे ठीक करते हैं ...

हमने सब कुछ कतार में लगा दिया

हम वादे की कतार में अपने chaptersUrls को रखना चाहते हैं। हम इस प्रकार कर सकते हैं:

 //    ,     var sequence = Promise.resolve(); //      story.chapterUrls.forEach(function(chapterUrl) { //       sequence = sequence.then(function() { return getJSON(chapterUrl); }).then(function(chapter) { addHtmlToPage(chapter.html); }); });

यहाँ हम पहली बार हैं और फैक्ट्री पद्धति Promise.resolve परिचित हुए, जो उस मूल्य के साथ एक तुरंत पूरा किया गया वादा बनाता है जो आप उसे देते हैं। यदि आप उसे एक वादे की तरह कुछ देते हैं (ऐसी चीज़ जिसमें then तरीका होता है), वह उसकी एक प्रति लौटा देगा। यदि आप एक तर्क के बिना Promise.resolve कहते हैं, तो हमारे उदाहरण में, यह एक अपरिभाषित मूल्य के साथ एक सफल वादा लौटाएगा।

एक Promise.reject(val) विधि भी है, Promise.reject(val) , जो एक वादा देता है जो उस मूल्य के साथ एक त्रुटि के साथ Promise.reject(val) जिसे आप इसे (या undefined ) पास करते हैं।

हम array.reduce का उपयोग करके कोड को थोड़ा छोटा बना सकते हैं:

 //      story.chapterUrls.reduce(function(sequence, chapterUrl) { //       return sequence.then(function() { return getJSON(chapterUrl); }).then(function(chapter) { addHtmlToPage(chapter.html); }); }, Promise.resolve());

यहां पिछले उदाहरण के समान ही बात होती है, लेकिन हमें लूप के बाद कतार के लिए एक अलग चर आवंटित करने की आवश्यकता नहीं है। हमारे कमिंग कॉलबैक को एरे में प्रत्येक तत्व के लिए कहा जाता है। हमारी प्रारंभिक कतार, पहली पुनरावृत्ति के दौरान पारित की गई, यह है Promise.resolve(), लेकिन कॉलबैक के प्रत्येक बाद की कॉल के साथ, पिछली कॉल का परिणाम इसे पारित किया जाता है। array.reduceजब आप किसी एकल मान के लिए एक सरणी लाने की आवश्यकता होती है, तो इसका उपयोग करना बहुत सुविधाजनक है, उदाहरण के लिए, एक वादा, जैसा कि हमारे मामले में है।

आइए डालते हैं यह सब एक साथ ...

 getJSON('story.json').then(function(story) { addHtmlToPage(story.heading); return story.chapterUrls.reduce(function(sequence, chapterUrl) { return sequence.then(function() { // …   return getJSON(chapterUrl); }).then(function(chapter) { //      addHtmlToPage(chapter.html); }); }, Promise.resolve()); }).then(function() { //   ! addTextToPage(" "); }).catch(function(err) { //   ,    addTextToPage("- : " + err.message); }).then(function() { //       document.querySelector('.spinner').style.display = 'none'; });

और इसलिए यह हुआ! हमारे पास हमारे विचार का एक पूर्ण अतुल्यकालिक संस्करण है। लेकिन हम वहां नहीं रुकेंगे। फिलहाल, हमारे पृष्ठ को लोड करना कुछ इस तरह है:

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

 Promise.all(arrayOfPromises).then(function(arrayOfResults) { //... });

Promise.allवादों की एक सरणी को स्वीकार करता है और एक वादा वापस करता है, जो तभी पूरा होगा जब सभी वादे सफलतापूर्वक पूरे हो जाएंगे। यह सामान्य वादा कॉलबैक thenमें प्रत्येक के परिणामों की एक सरणी देगा जिसमें आपने उन्हें पारित किया था।

 getJSON('story.json').then(function(story) { addHtmlToPage(story.heading); //        return Promise.all( //     //     getJSON story.chapterUrls.map(getJSON) ); }).then(function(chapters) { //        … chapters.forEach(function(chapter) { // …     addHtmlToPage(chapter.html); }); addTextToPage(" "); }).catch(function(err) { addTextToPage("- : " + err.message); }).then(function() { document.querySelector('.spinner').style.display = 'none'; });

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

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

इसे लागू करने के लिए, हम एक ही समय में अपने सभी अध्यायों के लिए JSON से अनुरोध करेंगे, और फिर उन्हें दस्तावेज़ में जोड़ने के लिए एक कतार बनाएँ:

 getJSON('story.json').then(function(story) { addHtmlToPage(story.heading); //     //     getJSON //   ,     . return story.chapterUrls.map(getJSON) .reduce(function(sequence, chapterPromise) { //        , //       return sequence.then(function() { return chapterPromise; }).then(function(chapter) { addHtmlToPage(chapter.html); }); }, Promise.resolve()); }).then(function() { addTextToPage("All done"); }).catch(function(err) { addTextToPage("Argh, broken: " + err.message); }).then(function() { document.querySelector('.spinner').style.display = 'none'; });

और इसलिए हमने एक पत्थर से दो पक्षियों को मार दिया । हम एक साथ सभी सामग्री का अनुरोध करते हैं, लेकिन धीमे कनेक्शन के साथ, उपयोगकर्ता के पास पहले भाग को थोड़ा पहले देखने का अवसर होता है।

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

कॉलबैक और Node.js घटनाओं की शैली में उपरोक्त को दोहराना इतना सरल नहीं है और कोड की मात्रा को लगभग आधे से दोगुना कर देगा । एक रास्ता या दूसरा, यह वादों की कहानी के अंत से बहुत दूर है। आइए यह देखने की कोशिश करें कि वे अन्य नई ES6 सुविधाओं के साथ कैसे काम करते हैं ...

छोटा बोनस: वादे और जनरेटर

अगला, हम नई ES6 सुविधाओं के एक छोटे समूह पर एक नज़र डालेंगे, लेकिन आज आपको वादों को समझने और उनका उपयोग करने की आवश्यकता नहीं है। इसे आगामी ब्लॉकबस्टर के ट्रेलर के रूप में सोचें।

ईएस 6 हमें जनरेटर भी देता है । वे हमें कुछ बिंदु पर फ़ंक्शन से बाहर निकलने का अवसर देते हैं, जैसे कि रिटर्न करता है, लेकिन बाद में हम उसी बिंदु और उसी राज्य से निष्पादन जारी रख सकते हैं।

 function *addGenerator() { var i = 0; while (true) { i += yield i; } }

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

 var adder = addGenerator(); adder.next().value; // 0 adder.next(5).value; // 5 adder.next(5).value; // 10 adder.next(5).value; // 15 adder.next(50).value; // 65

लेकिन वादों के साथ काम करने पर जनरेटर हमें क्या लाभ देते हैं? आओ, आप अतुल्यकालिक कोड लिखने के लिए उनके व्यवहार का उपयोग कर सकते हैं जो तुल्यकालिक दिखता है। निम्नलिखित उदाहरण की प्रत्येक पंक्ति को समझने के बारे में बहुत अधिक चिंता न करें। यह एक फ़ंक्शन का वर्णन करता है जो हमें yieldएक वादा पूरा होने के लिए प्रतीक्षा करने के लिए उपयोग करने में सक्षम बनाता है ।

 function spawn(generatorFunc) { function continuer(verb, arg) { var result; try { result = generator[verb](arg); } catch (err) { return Promise.reject(err); } if (result.done) { return result.value; } else { return Promise.cast(result.value).then(onFulfilled, onRejected); } } var generator = generatorFunc(); var onFulfilled = continuer.bind(continuer, "next"); var onRejected = continuer.bind(continuer, "throw"); return onFulfilled(); }

... यह क्यू से एक समान फ़ंक्शन के समान है , बस देशी वादों के लिए अनुकूलित है। इसके साथ, हम अध्यायों को प्रदर्शित करने के अपने अंतिम उदाहरण को ले सकते हैं और इसे इस में बदल सकते हैं:

 spawn(function *() { try { // 'yield' effectively does an async wait, // returning the result of the promise let story = yield getJSON('story.json'); addHtmlToPage(story.heading); // Map our array of chapter urls to // an array of chapter json promises. // This makes sure they all download parallel. let chapterPromises = story.chapterUrls.map(getJSON); for (let chapterPromise of chapterPromises) { // Wait for each chapter to be ready, then add it to the page let chapter = yield chapterPromise; addHtmlToPage(chapter.html); } addTextToPage("All done"); } catch (err) { // try/catch just works, rejected promises are thrown here addTextToPage("Argh, broken: " + err.message); } document.querySelector('.spinner').style.display = 'none'; });

यह कोड पिछले वाले के समान ही काम करता है, लेकिन इसे पढ़ना बहुत आसान हो गया है। यदि आप प्रयोगात्मक जावास्क्रिप्ट सक्षम करते हैं तो उदाहरण क्रोम कैनरी में आज काम करेगा about:flags।

इस उदाहरण सुविधाओं ES6 का एक बहुत जोड़ती है: वादे, जेनरेटर let, for-of। और दिखाता है कि हम सामान्य के साथ सरल एसिंक्रोनस कोड कैसे लिख सकते हैं try/catch।

भविष्य निकट है।

जावास्क्रिप्ट वादा करता है