जावास्क्रिप्ट लूप में async / प्रतीक्षा के साथ कैसे काम करें

आदेश में या जावास्क्रिप्ट में समानांतर में अतुल्यकालिक छोरों को कैसे चलाएं?

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

तुल्यकालिक छोरों

कुछ समय पहले मैंने इस तरह से लूप लिखा था (शायद आप भी):

for (var i=0; i < array.length; i++) { var item = array[i]; //  -  item } 

यह चक्र अच्छा और तेज है। लेकिन उन्हें पठनीयता और समर्थन के साथ बहुत सारी समस्याएं हैं। थोड़ी देर बाद, मुझे इसके सबसे अच्छे संस्करण की आदत हो गई:

 array.forEach((item) => { //  -  item }); 

जावास्क्रिप्ट बहुत तेजी से विकसित हो रहा है। नई सुविधाएँ और वाक्यविन्यास दिखाई देते हैं। मेरी पसंदीदा संवर्द्धन में से एक async / प्रतीक्षा है ।

अब मैं इस वाक्यविन्यास का उपयोग अक्सर करता हूं। और कभी-कभी ऐसे हालात होते हैं जब मुझे सरणी तत्वों के साथ अतुल्यकालिक रूप से कुछ करने की आवश्यकता होती है।

अतुल्यकालिक छोरों

लूप के शरीर में await का उपयोग कैसे करें? चलो बस एक अतुल्यकालिक फ़ंक्शन लिखने की कोशिश करें और प्रत्येक तत्व को संसाधित करने के कार्य की अपेक्षा करें:

 async function processArray(array) { array.forEach(item => { //       //     ! await func(item); }) } 

यह कोड एक त्रुटि फेंक देगा। क्यों? क्योंकि हम एक तुल्यकालिक फ़ंक्शन के अंदर await उपयोग नहीं कर सकते हैं। जैसा कि आप देख सकते हैं, processArray एक अतुल्यकालिक फ़ंक्शन है। लेकिन forEach लिए हम जो फंक्शन का उपयोग करते हैं वह सिंक्रोनस है ।

इस बारे में क्या किया जा सकता है?

1. निष्पादन के परिणाम की प्रतीक्षा न करें

हम एक अनाम फ़ंक्शन को अतुल्यकालिक के रूप में परिभाषित कर सकते हैं:

 async function processArray(array) { array.forEach(async (item) => { await func(item); }) console.log('Done!'); } 

लेकिन forEach कार्य के पूरा होने का इंतजार नहीं करेगा। forEach एक सिंक्रोनस ऑपरेशन है। वह बस कार्यों को लॉन्च करेगी और आगे बढ़ेगी। चलो एक साधारण परीक्षण पर जाँच करें:

 function delay() { return new Promise(resolve => setTimeout(resolve, 300)); } async function delayedLog(item) { //    await  Promise //    delay await delay(); console.log(item); } async function processArray(array) { array.forEach(async (item) => { await delayedLog(item); }) console.log('Done!'); } processArray([1, 2, 3]); 

कंसोल में हम देखेंगे:

 Done! 1 2 3 

कुछ स्थितियों में, यह एक सामान्य परिणाम हो सकता है। लेकिन फिर भी, ज्यादातर मामलों में यह उपयुक्त तर्क नहीं है।

2. चक्र को क्रमिक रूप से संसाधित करना

लूप बॉडी के निष्पादन के परिणाम के लिए प्रतीक्षा करने के लिए, हमें "लूप" के लिए अच्छे पुराने "पर लौटने" की आवश्यकता है। लेकिन इस बार हम इसके नए संस्करण का उपयोग for..of निर्माण (धन्यवाद प्रोटोकॉल के लिए ) के साथ करेंगे:

 async function processArray(array) { for (const item of array) { await delayedLog(item); } console.log('Done!'); } 

यह हमें अपेक्षित परिणाम देगा:

 1 2 3 Done! 

सरणी के प्रत्येक तत्व को क्रमिक रूप से संसाधित किया जाएगा। लेकिन हम लूप को समानांतर में चला सकते हैं!

3. समानांतर में लूप को संसाधित करना

समानांतर में संचालन शुरू करने के लिए आपको कोड को थोड़ा संशोधित करना होगा:

 async function processArray(array) { //  "map"    const promises = array.map(delayedLog); //       await Promise.all(promises); console.log('Done!'); } 

यह कोड समानांतर में कई delayLog कार्यों को चला सकता है। लेकिन बड़े सरणियों के साथ सावधान रहें। बहुत से कार्य CPU और मेमोरी के लिए बहुत कठिन हो सकते हैं।

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