💑 🚥 🧐 जावास्क्रिप्ट अतुल्यकालिक सुविधाओं का एक संक्षिप्त इतिहास 💃🏿 🎂 🍛

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

हमें अतुल्यकालिक संचालन की आवश्यकता क्यों है?

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

क्रमिक रूप से निष्पादित क्यों नहीं?

अक्सर उपयोगकर्ता द्वारा आवश्यक जानकारी काफी समय के बाद ही प्राप्त की जा सकती है। यदि आप कार्यक्रम को इस प्रकार व्यवस्थित करते हैं:

साइट से जानकारी प्राप्त करना https: / some / api / item / 1
स्क्रीन पर पहले आइटम के बारे में जानकारी प्रदर्शित करें।

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

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

इस बिंदु पर, पृष्ठ पहले से ही प्रदर्शित है, इस तथ्य के बावजूद कि कुछ अनुरोध अभी तक पारित नहीं हुए हैं।

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

ES5 और पहले: कॉलबैक

कॉलबैक की समीक्षा के साथ आगे बढ़ने से पहले, आइए एक नज़र डालें / जानें कि उच्च आदेश के क्या कार्य हैं ।

जेएस में एक उच्च-क्रम फ़ंक्शन एक ऐसा फ़ंक्शन है जो किसी अन्य फ़ंक्शन को तर्क के रूप में लेता है । यहाँ एक उदाहरण है:

objectIsString(objectRef) { return typeof(objectRef) === 'String'; } listOfObjects.filter(objectIsString);

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

 setTimeout(console.log(1), 2000); console.log(2);

प्रिंट 2 1।

ES 6: वादा करता है

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

आइए चरणों में एक वादा बनाएं और उसका उपयोग करें।

 // : let promise; //     Promise. let promise = new Promise((resolve, reject) => { }); //  ,  . let promise = new Promise((resolve, reject) => { setTimeout(() => { resolve("result"); }, 1000); });

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

 promise .then( result => { }, error => { } ); //     – . promise .then( result => { //  - -    resolve alert("Fulfilled: " + result); // result -  resolve }, error => { //   -    reject alert("Rejected: " + error); // error -  reject } );

हो गया!

इसलिए, हम एक बार फिर से वादा करने की प्रक्रिया का संक्षेप में वर्णन करेंगे:

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

जेनरेटर। उपज

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

जनरेटर का मानक रूप: फ़ंक्शन * functionName () {}। कार्यों के शरीर में स्वयं, एक मध्यवर्ती मूल्य वापस करने के लिए उपज शब्द का उपयोग किया जाता है।

एक उदाहरण के रूप में, निम्नलिखित जनरेटर पर विचार करें:

 function* generateNumber() { yield 1; yield 2; return 3; }

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

 Let one = generateNumber.next(); // {value: 1, done: false}

अगला कॉल मान 2 को उसी तरह लौटाएगा। तीसरा कॉल 3 मान लौटाएगा, और फ़ंक्शन का निष्पादन समाप्त करेगा।

 Let two = generateNumber.next(); // {value: 2, done: false} Let three = generateNumber.next(); // {value: 3, done: false}

इसके बावजूद, जनरेटर अभी भी अगले फ़ंक्शन के माध्यम से पहुँचा जा सकता है। हालाँकि, यह समान मान लौटाएगा: {किया गया: सत्य} वस्तु।

ES7। Async / प्रतीक्षारत

एक साथ वाक्य रचना चीनी वर्गों और विरासत की नकल की मदद से ओओपी प्रेमियों को खुश करने की इच्छा के साथ, ईएस 7 के निर्माता जावास्क्रिप्ट की समझ बनाने की कोशिश कर रहे हैं और उन लोगों के लिए जो तुल्यकालिक कोड लिखना पसंद करते हैं। Async / wait constructs का उपयोग करते हुए, उपयोगकर्ता एसिंक्रोनस कोड को सिंक्रोनस के समान संभव लिखने में सक्षम है। यदि वांछित है, तो आप हाल ही में अध्ययन किए गए वादों से छुटकारा पा सकते हैं और न्यूनतम परिवर्तनों के साथ कोड को फिर से लिख सकते हैं।
एक उदाहरण पर विचार करें:

वादे का उपयोग:

 requestBook(id) { return bookAPIHelper.getBook(id).then(book => {console.log(book)}); }

Async / प्रतीक्षा का उपयोग करना।

 async requestBook(id) { Const book = await bookAPIHelper.getBook(id); Console.log(book); }

आइए बताते हैं कि हमने क्या देखा:

1) एसिंक्रोनस फ़ंक्शन की घोषणा करते समय Async - कीवर्ड जोड़ा गया
2) प्रतीक्षा करें - एक एसिंक्रोनस फ़ंक्शन को कॉल करते समय एक कीवर्ड जोड़ा गया।

ES8। अतुल्यकालिक Iteration

डेटा से अधिक तुल्यकालिक रूप से इरेट करना ES5 में संभव हो गया। दो विशिष्टताओं के बाद, अतुल्यकालिक डेटा स्रोतों में काम कर रहे अतुल्यकालिक पुनरावृत्ति की संभावना को जोड़ने का निर्णय लिया गया। अब, जब अगला () कहा जाता है, तो यह {मान, किया हुआ} नहीं, बल्कि एक वादा (ES6 देखें) लौटाएगा।

आइए createAsyncIterable (चलने योग्य) फ़ंक्शन को देखें।

 async function* createAsyncIterable(iterable) { for (const elem of iterable) { yield elem; } }

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

 const asyncIterable = createAsyncIterable(['async 1', 'async 2']); const asyncIterator = asyncIterable[Symbol.asyncIterator](); asyncIterator.next() .then(result => { console.log(result); // { // value: 'async 1', // done: false, // } return asyncIterator.next(); }) .then(result => { console.log(result); // { // value: 'async 2', // done: false, // } return asyncIterator.next(); }) .then(result => { console.log(result); // { // value: 'undefined', // done: true, // } });

इसके अलावा, नया मानक लूप के फॉर-वेट को परिभाषित करता है जो इस तरह के ऑपरेशन के लिए सुविधाजनक है।

 for await (const x of createAsyncIterable(['a', 'b']))

टीएल, डॉ

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

संक्षेप में, तब:

कॉलबैक <= ES5
वादे, उपज (जनरेटर): ईएस 6
Async / प्रतीक्षा: ES7
Async इटरेटर: ES8

जावास्क्रिप्ट अतुल्यकालिक सुविधाओं का एक संक्षिप्त इतिहास