🏸 📳 🐇 एक बार फिर Deferred / Promise के बारे में 👇🏼 🤽🏽 👆🏾

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

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

हां, शायद जो लोग इस मुद्दे से परिचित हैं, उनके लिए यह दुखद होगा और लानत नहीं। इसके अलावा, इस मुद्दे पर पहले ही कई बार चर्चा हो चुकी है। हालांकि, मुझे इसे फिर से छूने की हिम्मत होगी और यही कारण है कि: 1) मुझे ऐसा लगता है कि कुछ पाठकों के लिए यह पोस्ट दिलचस्प हो सकती है। 2) मैं अभ्यास से जाऊंगा, सिद्धांत से नहीं। मेरा कार्य उपकरण के संचालन को प्रदर्शित करना है। सिद्धांत और अन्य अनुप्रयोग यदि आवश्यक हो, तो आप पोस्ट के लिंक में पाएंगे।

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

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

आगे मैं कॉफीस्क्रिप्ट (स्पॉइलर के तहत जावास्क्रिप्ट के साथ) पर उदाहरण दिखाऊंगा और मुझे कॉफीस्क्रिप्ट के बारे में कुछ बिंदुओं को स्पष्ट करना चाहिए।

1) कॉफीस्क्रिप्ट बिल्कुल जावास्क्रिप्ट के समान है, लेकिन एक क्लीनर और लैकोनिक सिंटैक्स के साथ।
2) -> कॉफीस्क्रिप्ट में फ़ंक्शन का अर्थ है () {} जावास्क्रिप्ट में
3) (ए, बी) -> कॉफीस्क्रिप्ट में जावास्क्रिप्ट में फ़ंक्शन (ए, बी) {} का मतलब है
4) जावास्क्रिप्ट में CoffeeScript साधन () में करते हैं। यही है, एक फ़ंक्शन कॉल जिसका नाम निर्दिष्ट करने के बाद है
5) डू (ए, बी) -> "हैलो वर्ल्ड!" in CoffeeScript का अर्थ है (फ़ंक्शन (ए, बी) {रिटर्न "हैलो वर्ल्ड!";}) (ए, बी) जावास्क्रिप्ट में

विधि लागू करें

मैं आलसी हूं और चाबियों पर एक बार फिर उंगलियां चटकाना पसंद नहीं करता। इसलिए, कंसोल.लॉग मैं सिर्फ लॉग का उपयोग करना पसंद करता हूं। लागू JS विधि का उपयोग करके इसे प्राप्त करना आसान है।

आवेदन विधि क्या है? यह फंक्शन मेथड्स में से एक है (Function.apply)। तो, यह सभी कार्यों पर लागू होता है।
आवेदन विधि क्या करती है? इसे एक फ़ंक्शन से कहा जाता है और इसलिए इसे प्रभावित करता है। पहला तर्क तथाकथित फ़ंक्शन का संदर्भ सेट करता है, अर्थात। वास्तव में जबरन इस फ़ंक्शन के अंदर इसका मूल्य निर्धारित करता है। दूसरा तर्क फ़ंक्शन के लिए मापदंडों की सरणी सेट करता है।
इसका उपयोग कहां किया जा सकता है? अक्सर कार्यों के विवरण में आप देख सकते हैं कि यह इनपुट के रूप में मापदंडों fn (X1, x2, x3, x4, ...) की एक सूची प्राप्त करता है, लेकिन परिस्थितियों के एक अजीब संयोजन के लिए आपके पास चर की एक सरणी हो सकती है और इस फ़ंक्शन को किसी फ़ंक्शन में पास करना चाहते हैं। एक सूची के रूप में, एक एकल सरणी चर नहीं। यह वही है जो लागू विधि करने में मदद करता है। संक्षेप में, आवेदन आपको फ़ंक्शन मापदंडों की सूची में चर की एक सरणी का विस्तार करने की अनुमति देता है।

यह जानते हुए कि जावास्क्रिप्ट में फ़ंक्शन के लिए दिए गए सभी मानों की एक सरणी को तर्क चर के माध्यम से प्राप्त किया जा सकता है, हम अपने कानों के लिए निम्नलिखित संकेत देते हैं:

window.log = -> try console.log.apply(console, arguments)

जेएस संस्करण

 window.log = function() { try { return console.log.apply(console, arguments); } catch (_error) {} };

यहाँ क्या हुआ? मैंने वैश्विक दायरे में एक लॉग विधि बनाई। सभी तर्क जो मुझे प्राप्त होते हैं जब मैं लॉग विधि को कॉल करता हूं मैं एक सूची के रूप में कंसोल.लॉग फ़ंक्शन (लागू विधि मेरी मदद करता है) के रूप में करता है। इसके अलावा, कंसोल.लॉग विधि के तर्क का उल्लंघन नहीं करने के लिए, मैंने कंसोल फ़ंक्शन को लागू फ़ंक्शन के पहले तर्क के रूप में पास करना पसंद किया। ऐसे ब्राउज़र जिनके लिए कंसोल.लॉग की समस्या है , मैं खुद को बचाने के लिए प्रयास करता हूं।

कॉफी में कुछ और चीनी

रखो ... तर्कों के बाद सरणी और आप अपने आप को संदर्भ निर्दिष्ट करने और मैन्युअल रूप से लागू करने की आवश्यकता बचाते हैं। यह कोड ऊपर प्रस्तुत किए गए के समान है।

 window.log = -> try console.log arguments...

यदि इसके साथ सब कुछ कम या ज्यादा स्पष्ट है, तो हम आगे बढ़ते हैं। वैसे, मुझे सिर्फ आवेदन के बारे में याद था - यह अभी भी हमारे लिए उपयोगी है।

चरण 1. क्लासिक समस्या

10 अतुल्यकालिक अनुरोधों का अनुकरण करने के लिए, हम सेटटाइमआउट विधि का उपयोग करते हैं। निष्पादित होने पर, वह निष्पादन की मुख्य धारा से अलग हो जाता है और "अपना जीवन जीता है"। इसलिए हमें आस्थगित वस्तुओं के संचालन की जांच के लिए एक बढ़िया विकल्प मिला।

चलो एक सरल लूप बनाते हैं और सेटटाइमआउट को 10 बार चलाते हैं और इंडेक्स चर को प्रोग्राम करते हैं।

 for index in [0...10] setTimeout -> log index , 1000

जेएस संस्करण

 var index, _i; for (index = _i = 0; _i < 10; index = ++_i) { setTimeout(function() { return log(index); }, 1000); }

ठीक एक सेकंड बाद, हमें "0 1 2 3 4 5 6 7 8 9" नंबर नहीं मिलते हैं, लेकिन "10 10 10 10 10 10 10 10 10 10 10" ।
ऐसा इसलिए हुआ क्योंकि जब तक सेटटाइमआउट के अंदर कोड निष्पादित किया जाता है, तब तक चक्र पहले ही समाप्त हो जाएगा (यह बहुत जल्दी काम करेगा), और सूचकांक काउंटर इस क्षण तक एक चरम मूल्य लेगा और 10 होगा।

चरण 2. क्लासिक समाधान

उपरोक्त समस्या को हल करने के लिए, आपको बस एक फ़ंक्शन में निष्पादन योग्य कोड को लपेटने और कॉल करने की आवश्यकता है, काउंटर के वर्तमान मूल्य को पारित करना। देखा! कॉफी की पटकथा में, इन क्रियाओं को काफी शान से किया जाता है।

 for index in [0...10] do (index) -> setTimeout -> log index , 1000

जेएस संस्करण

 var index, _fn, _i; _fn = function(index) { return setTimeout(function() { return log(index); }, 1000); }; for (index = _i = 0; _i < 10; index = ++_i) { _fn(index); }

चरण 3. काम कैसे स्थगित किया जाता है?

आस्थगित वस्तु एक अतुल्यकालिक समारोह की स्थिति का एक भंडार है। आमतौर पर ऐसी कई शर्तें हैं:

- लंबित - लंबित प्रक्रिया पूर्ण
- अस्वीकृत - प्रक्रिया क्रैश द्वारा समाप्त हो गई है
- हल - प्रक्रिया सफलतापूर्वक पूरी हुई

इसके अलावा, एक आस्थगित ऑब्जेक्ट में कई विधियां होती हैं जो इसकी स्थिति को बदल सकती हैं। उदाहरण के लिए, .resolve () विधि।

आस्थगित वस्तु की स्थिति के आधार पर, हम यह निर्धारित कर सकते हैं कि क्या जिस प्रक्रिया की स्थिति हम देख रहे हैं वह समाप्त हो गई है।

इससे हम यह निष्कर्ष निकाल सकते हैं कि आस्थगित वस्तु का उपयोग करने के लिए, हमें चाहिए:

1) एक आस्थगित वस्तु बनाएँ
2) अतुल्यकालिक विधि के पूरा होने पर, इच्छित ऑब्जेक्ट को इच्छित स्थिति में स्थानांतरित करें
3) वर्तमान फ़ंक्शन से हटाए गए ऑब्जेक्ट को कहीं पर पास करें जहां उसके राज्य को ट्रैक किया जाएगा।

नीचे आपको वह कोड दिखाई देता है जो इसे दिखाता है। मैं इच्छुक पाठक की दया पर विस्तृत विश्लेषण छोड़ता हूं। वापसी के लिए dfd.promise (), नमूना कोड के तुरंत बाद पढ़ें।

 for index in [0...10] promise = do (index) -> dfd = new $.Deferred() setTimeout -> log index dfd.resolve() , 1000 return dfd.promise()

जेएस संस्करण

 var index, promise, _i; for (index = _i = 0; _i < 10; index = ++_i) { promise = (function(index) { var dfd; dfd = new $.Deferred(); setTimeout(function() { log(index); return dfd.resolve(); }, 1000); return dfd.promise(); })(index); }

आपको निश्चित रूप से लाइन रिटर्न dfd.promise () पर ध्यान देना चाहिए। और निश्चित रूप से आप एक उचित सवाल पूछेंगे: "क्यों समारोह से लौटते समय, यह हस्तांतरित की गई वस्तु नहीं है, लेकिन यह वादा है ?"। लब्बोलुआब यह है कि यह माना जाता है कि जब एक आस्थगित ऑब्जेक्ट को पास किया जाता है, तो आपको इसे उन सभी तरीकों से बाहर करना होगा जो इसकी स्थिति को बदल सकते हैं। कहीं से भी, एक कड़ाई से परिभाषित अनुमत क्षेत्र को छोड़कर, एक आस्थगित वस्तु अपने राज्य को बदलने में सक्षम नहीं होना चाहिए। अन्यथा, अंतिम डेवलपर प्रलोभन का विरोध नहीं कर सकता है और दिए गए पैटर्न का उल्लंघन कर सकता है। वादा सिर्फ आस्थगित की एक छंटनी प्रति वापस करने के लिए प्रतिबद्ध है।

चरण 4. हम "वादों" की एक सरणी बनाते हैं

अगर हमें 10 अतुल्यकालिक कार्यों के निष्पादन के लिए प्रतीक्षा करने की आवश्यकता है, तो हम बस "वादों" की एक सरणी बनाते हैं (जाहिरा तौर पर कुछ समय में अपने निष्पादन को समाप्त करने का वादा करते हैं), जो लूप के अंदर के कार्यों में बनते हैं। और इसलिए, हम एक खाली सरणी बनाते हैं और इसमें प्रत्येक पुनरावृत्ति पर एक नया "वादा" करते हैं।

 promises_ary = [] for index in [0...10] promise = do (index) -> dfd = new $.Deferred() setTimeout -> log index dfd.resolve() , 1000 dfd.promise() promises_ary.push promise log promises_ary

जेएस संस्करण

 var index, promise, promises_ary, _i; promises_ary = []; for (index = _i = 0; _i < 10; index = ++_i) { promise = (function(index) { var dfd; dfd = new $.Deferred(); setTimeout(function() { log(index); return dfd.resolve(); }, 1000); return dfd.promise(); })(index); promises_ary.push(promise); } log(promises_ary);

परिणामस्वरूप, लॉग हमें वस्तुओं की एक सूची दिखाएगा।

 # => [obj, obj, ...]

चरण 5. हम "वादों" की एक सरणी का उपयोग करते हैं

और अब एक कॉलबैक को लटका देना बहुत आसान है जिसे सभी अतुल्यकालिक कार्यों के पूरा होने के बाद ही कहा जाएगा। इसके लिए हमें $ jQuery विधि की आवश्यकता है। $ .When प्रलेखन का वर्णन है कि कैसे एक विधि इनपुट के रूप में मापदंडों की सूची को स्वीकार करती है। हालाँकि, हमारे पास इनपुट पर वादों_री मापदंडों की एक सरणी है। जैसा कि अनुमान लगाना कठिन नहीं है, हम फिर से लागू पद्धति का उपयोग करते हैं।

 promises_ary = [] for index in [0...10] promise = do (index) -> dfd = new $.Deferred() setTimeout -> log index dfd.resolve() , 1000 dfd.promise() promises_ary.push promise $.when.apply($, promises_ary).done -> log 'Promises Ary is Done'

चरण 6. थोड़ा मौका

अंत में, निश्चित रूप से, आपको हमारे सेटटाइमआउट फ़ंक्शन में थोड़ा "यादृच्छिकता" जोड़ना चाहिए। हम एक सरल ~~सहायक~~ विधि बनाएंगे जो यादृच्छिक संख्याओं को लौटाएगी और यादृच्छिक विलंब के साथ सेटटाइमआउट के अंदर कोड निष्पादित करेगी।

 rand = (min, max) -> Math.floor(Math.random() * (max - min + 1) + min) promises_ary = [] for index in [0...10] promise = do (index) -> dfd = new $.Deferred() setTimeout -> log index dfd.resolve() , rand(1, 5) * 1000 dfd.promise() promises_ary.push promise $.when.apply($, promises_ary).done -> log 'Promises Ary is Done'

जेएस संस्करण

 var index, promise, promises_ary, _i; rand = function(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }; promises_ary = []; for (index = _i = 0; _i < 10; index = ++_i) { promise = (function(index) { var dfd; dfd = new $.Deferred(); setTimeout(function() { log(index); return dfd.resolve(); }, rand(1, 5) * 1000); return dfd.promise(); })(index); promises_ary.push(promise); } $.when.apply($, promises_ary).done(function() { return log('Promises Ary is Done'); });

निष्कर्ष में, यह कहा जाना चाहिए कि संस्करण 1.5 के बाद से jQuery के सभी AJAX अनुरोधों का उपयोग करते हैं, इसलिए उनके साथ काम करना और भी सरल है।

मैं यहीं रुक जाऊंगा। मेरी राय में, स्पष्टीकरण के साथ मूल उदाहरण पूरा हो गया है। मुझे लगता है कि अन्य स्रोतों से Deferred / Promise तकनीक का गहन अध्ययन जारी रखने के लिए यह पर्याप्त होगा। मुझे उम्मीद है कि यह पोस्ट एक दिन किसी की मदद करती है।

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

चर्चा के लिए प्रश्न: उन कार्यों के बारे में सीखना दिलचस्प होगा, जहाँ आपने डिफर्ड / प्रॉमिस का उपयोग किया था।

एक बार फिर Deferred / Promise के बारे में

विधि लागू करें

चरण 1. क्लासिक समस्या

चरण 2. क्लासिक समाधान

चरण 3. काम कैसे स्थगित किया जाता है?

चरण 4. हम "वादों" की एक सरणी बनाते हैं

चरण 5. हम "वादों" की एक सरणी का उपयोग करते हैं

चरण 6. थोड़ा मौका

More articles: