यदि आप विभिन्न प्रोग्रामिंग भाषाओं से आने वाले इंजीनियर या डेवलपर हैं, तो आपने किसी मेथड के निष्पादन को रोकने या रोकने के लिए sleep() नामक एक नेटिव मेथड का उपयोग किया होगा। JavaScript में ऐसा कोई नेटिव मेथड नहीं है।
इस लेख में, हम JavaScript का उपयोग करके स्लीप फंक्शन को अनुकरण करने के दो अलग-अलग तरीकों के बारे में बात करेंगे: Promises और async/await फंक्शन्स।
असिंक्रोनस फंक्शन्स का परिचय
हमें JavaScript में Promises या async/await फंक्शन्स के बारे में बात करने से पहले setTimeout() मेथड का संक्षिप्त उल्लेख करना चाहिए। यह मेथड दिखाएगा कि JavaScript में Promises की आवश्यकता क्यों है।
JavaScript सिंगल-थ्रेडेड है
जब हम कहते हैं कि JavaScript एक सिंगल-थ्रेडेड भाषा है, तो हमारा मतलब है कि JavaScript में केवल एक कॉल स्टैक और एक मेमोरी हीप है। उच्च स्तर पर, इसका मतलब है कि JavaScript कोड को एक समय में एक लाइन, क्रम में पढ़ता है, और अगली लाइन पर जाने से पहले कोड के एक टुकड़े को निष्पादित करना होगा। यह JavaScript को स्वभाव से सिंक्रोनस बनाता है। कई बार, हमें अपने कोड को असिंक्रोनस बनाने के लिए एक वर्कअराउंड की आवश्यकता होती है।
सिंक्रोनस कोड बनाम असिंक्रोनस कोड
इस उदाहरण को देखें।
//synchronous console.log("This will print first") console.log("This will print second") console.log("This will print third");
काफी सीधा, है ना? प्रत्येक console.log क्रम में प्रिंट होगा क्योंकि JavaScript उन्हें क्रम में निष्पादित करता है।
मान लीजिए हम चाहते हैं कि लाइन दो लाइन तीन से पहले प्रिंट हो? हम अनिवार्य रूप से उस console.log को क्रम से बाहर कैसे प्रिंट कर सकते हैं? हम इसे setTimeout() के साथ कर सकते हैं:
//setTimeout console.log("This will print first") setTimeout(() => { console.log("This will print third") }, 1000); console.log("This will print second");
setTimeout() हमें थ्रेड को ब्लॉक किए बिना एक JavaScript फंक्शन को निष्पादित करने की अनुमति देता है ताकि अन्य कोड चल सके। पहला आर्गुमेंट कॉलबैक फंक्शन है जो एक निर्धारित समय (दूसरा आर्गुमेंट) के बाद चलता है। दूसरा आर्गुमेंट मिलीसेकंड की संख्या में दर्शाया गया है।
यह setTimeout() मेथड अन्य भाषाओं में नेटिव स्लीप मेथड की नकल करता है:
- जब JavaScript इंजन
setTimeout()फंक्शन को निष्पादित करता है तो बैकग्राउंड में एक टाइमर सेट करना - टाइमर अपनी उलटी गिनती करता है तब अन्य कोड चलाना जारी रखना
- जब टाइमर शून्य पर पहुंचता है तो
setTimeout()में कॉलबैक फंक्शन निष्पादित करना।
यह समझना कि setTimeout() कैसे काम करता है, Promises और async/await फंक्शन्स कैसे काम करते हैं, यह समझने के लिए महत्वपूर्ण है। हम आगे Promises को कवर करेंगे।
Promises
Promise बनाना
Promises असिंक्रोनस लॉजिक करने का एक तरीका है। Promise कंस्ट्रक्टर एक कॉलबैक फंक्शन लेता है जिसमें दो पैरामीटर्स होते हैं: resolve और reject। इस कॉलबैक फंक्शन में लॉजिक होता है जो एक बार समाप्त होने पर, प्रतिक्रिया के साथ resolve या reject फंक्शन को आमंत्रित करेगा।
console.log("before promise") let promise = new Promise((resolve, reject) => { let resolvedFlag = false; //यह सिर्फ एक फ्लैग है ताकि हम लॉजिक का परीक्षण करने के लिए जानबूझकर प्रतिक्रिया फेंक सकें console.log("first"); console.log("second") console.log("third") console.log("fourth"); resolvedFlag = true; //सभी console logs हो जाने के बाद resolved को true पर फ्लिप करें if(resolvedFlag) { //यदि resolved true है तो resolve फंक्शन को आमंत्रित करें resolve("Promise resolved"); console.log("after promise"); } else { //अन्यथा एक नए Error ऑब्जेक्ट के साथ reject फंक्शन को संदेश के साथ आमंत्रित करें reject(new Error("Promise failed")); console.log("after promise"); } });
यहां कोड स्निपेट एक सरल promise को प्रदर्शित करता है। Promises तीन अवस्थाओं में हो सकते हैं:
pending - न तो resolved और न ही rejected - यह promise की प्रारंभिक अवस्था है
resolved - सफल निष्पादन
rejected - निष्पादन में त्रुटि
उपरोक्त कोड स्निपेट में resolvedFlag को true से false पर टॉगल करके resolved promise और rejected promise के रिज़ॉल्यूशन को प्रदर्शित करने का प्रयास करें।
याद रखने वाली मुख्य बात यह है कि इस Promise में एक फंक्शन होता है जो स्क्रिप्ट के निष्पादन को तब तक रोकता है जब तक Promise resolved या rejected नहीं हो जाता। फिर स्क्रिप्ट फिर से शुरू होती है।
Promise प्रतिक्रिया का उपयोग करना
जब हम Promise का एक उदाहरण शुरू करते हैं, तो हम वापस लौटे Promise से प्रतिक्रिया प्राप्त करने के बाद हम जिस लॉजिक का उपयोग करना चाहते हैं उसे रखने के लिए then() और catch() का उपयोग करते हैं। यह एक स्टेटमेंट के रूप में रखा गया है - एक उच्च-स्तरीय अवलोकन इस तरह दिखता है:
promise.then(func).catch(func);
then और catch मेथड्स को आमंत्रित करने वाले पैरेंथेसिस में एक अनाम फंक्शन होता है जिसमें प्रतिक्रिया पैरामीटर के रूप में पास की जाती है।
promise // ऊपर पिछले कोड स्निपेट में बनाया गया promise .then(response => { // यहां हिट होता है यदि सफल प्रतिक्रिया // सफल प्रतिक्रिया पर होने वाला लॉजिक console.log(response); console.log("after promise"); }) .catch(error => { // यहां किसी भी त्रुटि को पकड़ता है। // त्रुटि प्रतिक्रिया पर होने वाला लॉजिक console.log(error.message); console.log("after promise"); })
Promises का उपयोग अक्सर डेटाबेस पर कॉल करते समय या HTTP अनुरोध करते समय किया जाता है।
Async/Await फंक्शन्स
sleep() मेथड का अनुकरण करने का अंतिम तरीका async/await फंक्शन्स का उपयोग करना है। अनिवार्य रूप से, ये असिंक्रोनस फंक्शन्स केवल उसी लॉजिक को बनाने का एक और तरीका है जिसका उपयोग हम Promises में करेंगे, लेकिन कम कोड के साथ।
async शब्द प्री-ES6 फंक्शन्स में function कीवर्ड से पहले और ES6+ फंक्शन्स में पैरामीटर्स से पहले रखा जाता है। आप जो भी लॉजिक अगले चरण पर जाने से पहले करना चाहते हैं वह कोड के इस ब्लॉक में जाता है।
const firstFunction = () => { // लॉजिक जो आप असिंक्रोनस रूप से करना चाहते हैं let resolved = true; if(resolved) { let respObj = { message: "Resolved!"}; return respObj.message; } else { let errObj = { message: "Error!"}; return errObj.message; } } const asyncExample = async () => { // पैरामीटर्स जहां जाएंगे उससे पहले async कीवर्ड console.log("Calling function..."); let result = await firstFunction(); // उस फंक्शन के आह्वान से पहले await जाता है जिसमें आपका लॉजिक है। // अगली लाइन पर तब तक नहीं जाएगा जब तक फंक्शन पूरा नहीं हो जाता। console.log(result); return result; } asyncExample() // async/await फंक्शन को आमंत्रित करता है
async/await फंक्शन्स का उपयोग वस्तुतः उसी असिंक्रोनस प्रोमिस-आधारित प्रक्रिया का परिणाम देता है लेकिन कम कोड के साथ।
निष्कर्ष
इस लेख में हमने अन्य प्रोग्रामिंग भाषाओं में नेटिव sleep() फंक्शन की नकल करने के तरीकों पर एक नज़र डाली। हमने असिंक्रोनस JavaScript फंक्शन्स की अवधारणा को प्रदर्शित करने के लिए setTimeout() का उपयोग किया ताकि हम Promises और async/await फंक्शन्स को देख सकें।
