इनकार कॉलबैक: ECMAScript 6 में जनरेटर

मैं लगातार लोगों को JavaScript में अतुल्यकालिक कॉलबैक के बारे में सुनता हूं। इस भाषा में निष्पादन के क्रम को ध्यान में रखते हुए थोड़ा मुश्किल है (यह मामला है जिसे " कॉलबैक नर्क " या " कयामत का पिरामिड ") कहा जाता है, यदि आपने पहले तुल्यकालिक प्रोग्रामिंग से निपटा है। मेरा सामान्य उत्तर था "आपको किसी तरह इससे निपटना होगा।" आखिरकार, क्या हम सभी प्रोग्रामिंग भाषाओं को समान दिखने और महसूस करने की उम्मीद करते हैं? बिल्कुल नहीं।

ECMAScript 6 ड्राफ्ट की हालिया समीक्षा से सब कुछ बदल गया, जो जनरेटर का वर्णन करता है - भाषा की एक विशेषता जो सर्वर-साइड और क्लाइंट-साइड JavaScript दोनों को लिखने के हमारे तरीके को पूरी तरह से बदल देगी। जनरेटर का उपयोग करके, हम अपने एकमात्र event loop को अवरुद्ध किए बिना नेस्टेड कॉलबैक को सिंक्रोनस कोड में बदल सकते हैं।
उदाहरण के लिए, यह कोड:

  setTimeout(function(){ _get("/something.ajax?greeting", function(err, greeting) { if (err) { console.log(err); throw err; } _get("/else.ajax?who&greeting="+greeting, function(err, who) { if (err) { console.log(err); throw err; } console.log(greeting+" "+who); }); }); }, 1000); 

इस तरह लिखा जा सकता है:

  sync(function* (resume) { try (e) { yield setTimeout(resume, 1000); var greeting = yield _get('/something.ajax?greeting', resume) var who = yield _get('/else.ajax?who&greeting=' + greeting, resume) console.log(greeting + ' ' + who) } catch (e) { console.log(e); throw e; } }); 

दिलचस्प है, है ना? केंद्रीकृत अपवाद हैंडलिंग और स्पष्ट निष्पादन आदेश।

उह, ईसीएमएस्क्रिप्ट 6?

इस लेख के उदाहरण Chrome Canary 33.0.1716.0 में काम करेंगे। उदाहरण, जहां XHR , उन लोगों के अपवाद के साथ, Node.js में - --harmony ध्वज के साथ काम करना चाहिए (चूंकि संस्करण 0.11, लगभग। अनुवाद। )। JavaScript 1.7+ में प्रस्तावित जनरेटर कार्यान्वयन ECMAScript 6 मसौदे का पालन नहीं करता है - इसलिए आपको Firefox में उदाहरणों को काम करने के लिए कुछ बदलाव करने होंगे। यदि आप Canary में इन उदाहरणों को चलाना चाहते हैं, तो आप उन्हें उसी तरह से यहां चला सकते हैं।

ES6 जनरेटर

उपरोक्त उदाहरणों में क्या हो रहा है यह समझने के लिए, हमें इस बारे में बात करने की आवश्यकता है कि ES6 जनरेटर क्या हैं और वे आपको क्या करने की अनुमति देते हैं।

ECMAScript 6 मसौदे के अनुसार, जेनरेटर "प्रथम श्रेणी के कोरआउट्स हैं, जो ऐसी वस्तुएं हैं जो लंबित निष्पादन संदर्भों को संलग्न करती हैं"। सीधे शब्दों में कहें, जनरेटर वे कार्य हैं जो अपने निष्पादन ( yield कीवर्ड का उपयोग करके) को रोक सकते हैं और अपनी next विधि को कॉल करने के बाद उसी स्थान से निष्पादित करना जारी रख सकते हैं। JavaScript अभी भी एक समय में केवल एक कार्य करता है, लेकिन यह अब जनरेटर फ़ंक्शन के बीच में निष्पादन को रोक सकता है और संदर्भ को कुछ और के निष्पादन के लिए स्विच कर सकता है। जेनरेटर समानांतर कोड निष्पादन की अनुमति नहीं देते हैं और वे नहीं जानते हैं कि धाराओं को कैसे संभालना है।

मामूली इटरेटर

अब जब हम थोड़ा समझ गए हैं, तो कोड को देखते हैं। हम स्टॉप प्रदर्शित करने / सिंटैक्स जारी रखने के लिए एक छोटा पुनरावृत्ति लिखेंगे।

  function* fibonacci() { var a = 0, b = 1, c = 0; while (true) { yield a; c = a; a = b; b = c + b; } } function run() { var seq = fibonacci(); console.log(seq.next().value); // 0 console.log(seq.next().value); // 1 console.log(seq.next().value); // 1 console.log(seq.next().value); // 2 console.log(seq.next().value); // 3 console.log(seq.next().value); // 5 } run(); 

यहाँ क्या हो रहा है:

1. run फ़ंक्शन फाइबोनैचि संख्या जनरेटर को प्रारंभ करता है (यह विशेष सिंटैक्स funtion* द्वारा वर्णित है)। एक नियमित फ़ंक्शन के विपरीत, यह कॉल उसके शरीर का निष्पादन शुरू नहीं करता है, लेकिन एक नई वस्तु - एक जनरेटर लौटाता है।
2. जब run फ़ंक्शन next जनरेटर विधि (सिंक्रोनस ऑपरेशन) को कॉल करता है, तो कोड को निष्पादित किया जाता है जब तक कि यह yield सामना नहीं करता yield ।
3. yield निष्पादित करने से जनरेटर बंद हो जाता है और परिणाम वापस आ जाता है। इस बिंदु पर yield बाद के संचालन को पूरा नहीं किया गया था। निष्पादन परिणाम के value संपत्ति के माध्यम से मूल्य ( yield लिए a संचालन) बाहरी रूप से सुलभ होगा।
   अगली बार जब next विधि को जनरेटर पर बुलाया जाता है, तो कोड का निष्पादन जारी रहता है, जहां से यह पिछली yield पर रुक गया था।

आप शायद सोच रहे हैं कि क्या जनरेटर कभी while बाहर निकल जाएगा। नहीं, यह लूप के अंदर तब तक निष्पादित होगा जब तक कि कोई इसकी next विधि नहीं कहता।

ट्रैक कोड निष्पादन

जैसा कि पिछले उदाहरण में दिखाया गया है, yield बाद जनरेटर के शरीर में स्थित कोड को तब तक निष्पादित नहीं किया जाएगा जब तक कि जनरेटर जारी न हो। जनरेटर के लिए एक तर्क पारित करना भी संभव है, जिसे उस yield लिए प्रतिस्थापित किया जाएगा जिस पर जनरेटर का पिछला निष्पादन बाधित था।

  function* powGenerator() { var result = Math.pow(yield "a", yield "b"); return result; } var g = powGenerator(); console.log(g.next().value); // "a", from the first yield console.log(g.next(10).value); // "b", from the second console.log(g.next(2).value); // 100, the result 

जनरेटर का पहला रन रन परिणाम के value संपत्ति के रूप में "a" मान लौटाता है। फिर हम जनरेटर को 10 का मान पास करके निष्पादन जारी रखते हैं। जो कुछ होता है, उसे प्रदर्शित करने के लिए हम प्रतिस्थापन का उपयोग करेंगे:

  function* powGenerator() { var result = Math.pow(----10----, yield "b"); return result; } 

फिर जनरेटर दूसरी yield तक पहुंचता yield और इसके निष्पादन को फिर से रोक देता है। मान "b" लौटे ऑब्जेक्ट में उपलब्ध होगा। अंत में, हम फिर से निष्पादन जारी रखते हैं, 2 को तर्क के रूप में पारित करते हैं। फिर से प्रतिस्थापन:

  function* powGenerator() { var result = Math.pow(----10----, ----2----); return result; } 

उसके बाद, pow विधि कहा जाता है, और जनरेटर result चर में संग्रहीत मान लौटाता है।

नकली सिंक: ब्लॉकिंग Ajax

कई प्रविष्टि बिंदुओं के साथ फिबोनाची अनुक्रम पुनरावृत्ति और गणित कार्य दिलचस्प हैं, लेकिन मैंने आपको अपने JavaScript कोड में कॉलबैक से छुटकारा पाने का एक तरीका दिखाने का वादा किया है। जैसा कि यह पता चला है, हम पिछले उदाहरणों से कुछ विचार ले सकते हैं।

इससे पहले कि हम निम्नलिखित उदाहरण देखें, sync फ़ंक्शन पर ध्यान दें। यह resume से resume फ़ंक्शन को पास करके एक जनरेटर बनाता है और इसका निष्पादन शुरू करने के लिए उस पर next विधि कहता है। जब एक जनरेटर को एक एसिंक्रोनस कॉल की आवश्यकता होती है, तो यह एक कॉलबैक के रूप में resume करता है और yield करता yield । जब एक एसिंक्रोनस कॉल resume , तो यह next विधि को कॉल करता है, जनरेटर के निष्पादन को जारी रखता है और एसिंक्रोनस कॉल के परिणाम को पारित करता है।

कोड पर वापस:

  // ************** // framework code function sync(gen) { var iterable, resume; resume = function(err, retVal) { if (err) iterable.raise(err); iterable.next(retVal); // resume! }; iterable = gen(resume); iterable.next(); } function _get(url, callback) { var x = new XMLHttpRequest(); x.onreadystatechange = function() { if (x.readyState == 4) { callback(null, x.responseText); } }; x.open("GET", url); x.send(); } // **************** // application code sync(function* (resume) { log('foo'); var resp = yield _get("blix.txt", resume); // suspend! log(resp); }); log('bar'); // not part of our generator function's body 

क्या आप अनुमान लगा सकते हैं कि आप कंसोल में क्या देखेंगे? सही उत्तर "फू", "बार" और "ब्लिक्सटेक्स्ट में क्या है" है। जनरेटर के अंदर कोड को स्थिति में रखकर, हम इसे नियमित तुल्यकालिक कोड की तरह बनाते हैं। हम event loop थ्रेड को ब्लॉक नहीं करते हैं; हम जनरेटर बंद कर देते हैं और next कॉल के बाद आगे स्थित कोड निष्पादित करना जारी रखते हैं। भविष्य की कॉलबैक, जिसे एक और टिक पर बुलाया जाएगा, हमारे जनरेटर को जारी रखेगा, इसे वांछित मान पास करेगा।

केंद्रीकृत त्रुटि से निपटने

कई अतुल्यकालिक कॉलबैक के अंदर केंद्रीकृत त्रुटि हैंडलिंग एक दर्द है। यहाँ एक उदाहरण है:

  try { firstAsync(function(err, a) { if (err) { console.log(err); throw err; } secondAsync(function(err, b) { if (err) { console.log(err); throw err; } thirdAsync(function(err, c) { if (err) { console.log(err); throw err; } callback(a, b, c); }); }); }); } catch (e) { console.log(e); } 

इस तथ्य के कारण catch को कभी निष्पादित नहीं किया जाएगा कि कॉलबैक निष्पादन event loop एक अन्य टिक में पूरी तरह से अलग कॉल स्टैक का हिस्सा है। अपवाद हैंडलिंग कॉलबैक फ़ंक्शन के अंदर स्थित होना चाहिए। आप त्रुटियों के लिए कुछ दोहराया चेक से छुटकारा पाने के लिए और async जैसी लाइब्रेरी का उपयोग करके कुछ अनुलग्नकों को हटाने के लिए एक उच्च आदेश फ़ंक्शन को लागू कर सकते हैं। यदि आप पहले तर्क के रूप में एक त्रुटि के Node.js सम्मेलन का पालन करते हैं, तो आप एक सामान्य हैंडलर लिख सकते हैं जो सभी त्रुटियों को जनरेटर में वापस कर देगा:

  function sync(gen) { var iterable, resume; resume = function(err, retVal) { if (err) iterable.raise(err); // raise! iterable.next(retVal); }; iterable = gen(resume); iterable.next(); } sync(function* (resume) { try { var x = firstAsync(resume); var y = secondAsync(resume); var z = thirdAsync(resume); // … do something with your data } catch (e) { console.log(e); // will catch errors from any of the three calls } }); 

अब, किसी भी तीन कार्यों के अंदर होने वाले अपवादों को एक एकल catch द्वारा नियंत्रित किया जाएगा। और जो अपवाद तीन कार्यों में से किसी में हुआ, वह बाद के कार्यों को निष्पादित करने की अनुमति नहीं देगा। बहुत अच्छा।

एक साथ संचालन।

तथ्य यह है कि जनरेटर कोड को ऊपर से नीचे तक निष्पादित किया जाता है इसका मतलब यह नहीं है कि आप एक ही समय में कई अतुल्यकालिक संचालन के साथ काम नहीं कर सकते हैं। genny और gen-run जैसी genny तरह की API देती हैं: वे जनरेटर के साथ जारी रखने से पहले कई अतुल्यकालिक ऑपरेशन करते हैं। उदाहरण का उपयोग कर genny :

  genny.run(function* (resume) { _get("test1.txt", resume()); _get("test2.txt", resume()); var res1 = yield resume, res2 = yield resume; // step 1 var res3 = yield _get("test3.txt", resume()); // step 2 console.log(res1 + res2); }); 

कुल मिलाकर

अतुल्यकालिक कॉलबैक एक लंबे समय के लिए वास्तविक वास्तविक JavaScript पैटर्न रहे हैं। लेकिन अब, ब्राउज़र में जनरेटर के साथ (कुछ महीने पहले JavaScript 1.7 और JavaScript 1.7 साथ Chrome Canary ) Firefox , सब कुछ बदल रहा है। नया निष्पादन नियंत्रण निर्माण पूरी तरह से नई प्रोग्रामिंग शैली का उपयोग करना संभव बनाता है, जो कि नेस्टेड कॉलबैक की पारंपरिक शैली के साथ प्रतिस्पर्धा कर सकता है। यह तब तक इंतजार करना बाकी है जब तक ECMAScript 6 मानक कल के JavaScript इंजन में लागू नहीं होगा।