रोसारियो डी चियारा द्वारा लिखित✏️

जावास्क्रिप्ट में, प्रॉमिस अतुल्यकालिक संचालन को संभालने के लिए एक शक्तिशाली उपकरण है, विशेष रूप से यूआई-संबंधित घटनाओं में उपयोगी है। वे एक ऐसे मूल्य का प्रतिनिधित्व करते हैं जो तुरंत उपलब्ध नहीं हो सकता है लेकिन भविष्य में किसी बिंदु पर हल हो जाएगा।

वादे डेवलपर्स को एपीआई कॉल, उपयोगकर्ता इंटरैक्शन या एनिमेशन जैसे कार्यों से निपटने के दौरान क्लीनर, अधिक प्रबंधनीय कोड लिखने की अनुमति देते हैं (या अनुमति देनी चाहिए)। .then(), .catch(), और .finally() जैसी विधियों का उपयोग करके, वादे कुख्यात "कॉलबैक नरक" से बचते हुए, सफलता और त्रुटि परिदृश्यों को संभालने के लिए अधिक सहज तरीके को सक्षम करते हैं।

इस लेख में, हम नई (मार्च 2024 Promise.withResolvers() विधि का उपयोग करेंगे जो आपको तीन चीजों वाले ऑब्जेक्ट को वापस करके क्लीनर और सरल कोड लिखने की अनुमति देता है: एक नया वादा और दो फ़ंक्शन, एक वादा को हल करने के लिए और दूसरा इसे अस्वीकार करने के लिए क्योंकि यह एक हालिया अपडेट है, आपको इस आलेख में उदाहरणों को निष्पादित करने के लिए एक हालिया नोड रनटाइम (v>22) की आवश्यकता होगी।

पुरानी और नई जावास्क्रिप्ट वादा विधियों की तुलना करना

कोड के निम्नलिखित कार्यात्मक रूप से समतुल्य दो हिस्सों में, हम किसी वादे को हल करने या अस्वीकार करने के लिए विधि निर्दिष्ट करने के पुराने दृष्टिकोण और नए दृष्टिकोण की तुलना कर सकते हैं:

let resolve, reject;

const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

Math.random() > 0.5 ? resolve("ok") : reject("not ok");

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

निम्नलिखित कोड स्निपेट में, कोड का एक ही हिस्सा नई Promise.withResolvers() विधि के साथ फिर से लिखा गया है, और यह सरल प्रतीत होता है:

const { promise, resolve, reject } = Promise.withResolvers();

Math.random() > 0.5 ? resolve("ok") : reject("not ok");

यहां आप देख सकते हैं कि नया दृष्टिकोण कैसे काम करता है। यह वादा लौटाता है, जिस पर आप .then() विधि और दो कार्यों, समाधान और अस्वीकार को लागू कर सकते हैं।

वादों के लिए पारंपरिक दृष्टिकोण एक ही फ़ंक्शन के भीतर निर्माण और ईवेंट-हैंडलिंग तर्क को समाहित करता है, जो सीमित हो सकता है यदि कई स्थितियों या कोड के विभिन्न हिस्सों को वादे को हल करने या अस्वीकार करने की आवश्यकता होती है।

इसके विपरीत, Promise.withResolvers(), प्रॉमिस के निर्माण को रिज़ॉल्यूशन लॉजिक से अलग करके अधिक लचीलापन प्रदान करता है, जिससे यह जटिल परिस्थितियों या कई घटनाओं के प्रबंधन के लिए उपयुक्त हो जाता है। हालाँकि, सीधे उपयोग के मामलों के लिए, पारंपरिक विधि मानक वादा पैटर्न के आदी लोगों के लिए सरल और अधिक परिचित हो सकती है।

वास्तविक दुनिया का उदाहरण: एक एपीआई को कॉल करना

अब हम अधिक यथार्थवादी उदाहरण पर नए दृष्टिकोण का परीक्षण कर सकते हैं। नीचे दिए गए कोड में, आप एपीआई आमंत्रण का एक सरल उदाहरण देख सकते हैं:

function fetchData(url) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(response => {
                // Check if the response is okay (status 200-299)
                if (response.ok) {
                    return response.json(); // Parse JSON if response is okay
                } else {
                    // Reject the promise if the response is not okay
                    reject(new Error('API Invocation failed'));
                }
            })
            .then(data => {
                // Resolve the promise with the data
                resolve(data);
            })
            .catch(error => {
                // Catch and reject the promise if there is a network error
                reject(error);
            });
    });
}

// Example usage
const apiURL = '';

fetchData(apiURL)
    .then(data => {
        // Handle the resolved data
        console.log('Data received:', data);
    })
    .catch(error => {
        // Handle any errors that occurred
        console.error('Error occurred:', error);
    });

फ़ेचडेटा फ़ंक्शन को एक यूआरएल लेने और एक वादा वापस करने के लिए डिज़ाइन किया गया है जो फ़ेच एपीआई का उपयोग करके एपीआई कॉल को संभालता है। यह जांच कर प्रतिक्रिया को संसाधित करता है कि क्या प्रतिक्रिया की स्थिति 200-299 सीमा के भीतर है, जो सफलता का संकेत देती है।

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

उदाहरण दर्शाता है कि इस फ़ंक्शन का उपयोग कैसे करें, यह दर्शाता है कि .then() ब्लॉक के साथ हल किए गए डेटा को कैसे प्रबंधित किया जाए और .catch() ब्लॉक का उपयोग करके त्रुटियों को कैसे संभाला जाए, यह सुनिश्चित करते हुए कि सफल डेटा पुनर्प्राप्ति और त्रुटियां दोनों उचित रूप से प्रबंधित की जाती हैं।

नीचे दिए गए कोड में, हम नए Promise.withResolvers() विधि का उपयोग करके FetchData() फ़ंक्शन को फिर से लिखते हैं:

function fetchData(url) {
    const { promise, resolve, reject } = Promise.withResolvers();

    fetch(url)
        .then(response => {
            // Check if the response is okay (status 200-299)
            if (response.ok) {
                return response.json(); // Parse JSON if response is okay
            } else {
                // Reject the promise if the response is not okay
                reject(new Error('API Invocation failed'));
            }
        })
        .then(data => {
            // Resolve the promise with the data
            resolve(data);
        })
        .catch(error => {
            // Catch and reject the promise if there is a network error
            reject(error);
        });

    return promise;
}

जैसा कि आप देख सकते हैं, उपरोक्त कोड अधिक पठनीय है, और ऑब्जेक्ट प्रॉमिस की भूमिका स्पष्ट है: फ़ेचडाटा फ़ंक्शन एक प्रॉमिस लौटाएगा जो सफलतापूर्वक हल हो जाएगा या विफल हो जाएगा, प्रत्येक मामले में - उचित विधि का आह्वान करते हुए . आप ऊपर दिए गए कोड को api.invocation.{old|new}.js.

वादे रद्द

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

यह सीमा इसलिए उत्पन्न होती है क्योंकि वादों में एक परिभाषित राज्य परिवर्तन प्रक्रिया होती है; वे लंबित के रूप में शुरू होते हैं और, एक बार निपटारे के बाद, स्थिति नहीं बदल सकते हैं। उनका उद्देश्य ऑपरेशन को नियंत्रित करने के बजाय ऑपरेशन के परिणाम को समाहित करना है, जिसका अर्थ है कि वे अंतर्निहित प्रक्रिया को प्रभावित या रद्द नहीं कर सकते हैं। यह डिज़ाइन विकल्प वादों को सरल रखता है और किसी ऑपरेशन के अंतिम परिणाम का प्रतिनिधित्व करने पर केंद्रित होता है:

const cancellablePromise = () => {
    const { promise, resolve, reject } = Promise.withResolvers();

    promise.cancel = () => {
        reject("the promise got cancelled");
    };
    return promise;
};

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

एक वैकल्पिक दृष्टिकोण एबॉर्टकंट्रोलर और एबॉर्टसिग्नल का उपयोग करना है, जिसे जरूरत पड़ने पर रद्द करने के लिए अंतर्निहित ऑपरेशन (उदाहरण के लिए, एक HTTP अनुरोध) से जोड़ा जा सकता है। दस्तावेज़ीकरण से, आप देख सकते हैं कि एबॉर्टकंट्रोलर और एबॉर्टसिग्नल दृष्टिकोण ऊपर दिए गए कोड में हमने जो लागू किया है उसका अधिक अभिव्यंजक कार्यान्वयन है: एक बार एबॉर्टसिग्नल लागू होने के बाद, वादा खारिज हो जाता है।

एक अन्य दृष्टिकोण आरएक्सजेएस जैसे प्रतिक्रियाशील प्रोग्रामिंग पुस्तकालयों का उपयोग करना है, जो ऑब्जर्वेबल पैटर्न के कार्यान्वयन की पेशकश करता है, रद्दीकरण क्षमताओं सहित एसिंक डेटा स्ट्रीम पर अधिक परिष्कृत नियंत्रण प्रदान करता है।

अवलोकन और वादों के बीच तुलना

व्यावहारिक उपयोग के मामलों के बारे में बात करते समय, वादे एकल एसिंक्रोनस संचालन को संभालने के लिए उपयुक्त होते हैं, जैसे एपीआई से डेटा प्राप्त करना। इसके विपरीत, ऑब्जर्वेबल्स डेटा की धाराओं को प्रबंधित करने के लिए आदर्श हैं, जैसे उपयोगकर्ता इनपुट, वेबसॉकेट इवेंट, या HTTP प्रतिक्रियाएं, जहां समय के साथ कई मान उत्सर्जित हो सकते हैं।

हमने पहले ही स्पष्ट कर दिया है कि एक बार शुरू करने के बाद, वादे रद्द नहीं किए जा सकते हैं, जबकि ऑब्जर्वेबल्स स्ट्रीम से सदस्यता समाप्त करके रद्द करने की अनुमति देते हैं। सामान्य विचार यह है कि, ऑब्जर्वेबल्स के साथ, आपके पास ऑब्जेक्ट के साथ संभावित इंटरैक्शन की एक स्पष्ट संरचना होती है:

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

यह नीचे दिए गए कोड में प्रदर्शित किया गया है:

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

const observer = observable.subscribe({
  next(x) { console.log('Received value:', x); },
  complete() { console.log('Observable completed'); }
});

observer.unsubscribe();

इस कोड को प्रॉमिस के साथ दोबारा नहीं लिखा जा सकता क्योंकि ऑब्जर्वेबल तीन मान लौटाता है जबकि प्रॉमिस को केवल एक बार ही हल किया जा सकता है।

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

import { Observable, takeWhile } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

const observer1 = observable.subscribe({
  next(x) { console.log('Received by 1 value:', x); },
  complete() { console.log('Observable 1 completed'); }
});

const observer2 = observable.pipe(
  takeWhile(value => value != "2")
).subscribe(value => console.log('Received by 2 value:', value));

उपरोक्त कोड में, ऑब्जर्वर1 वैसा ही है जैसा हम पहले ही देख चुके हैं: यह बस सदस्यता लेगा और ऑब्जर्वेबल से सभी ईवेंट प्राप्त करता रहेगा। दूसरा, ऑब्जर्वर2, स्थिति के मिलान के दौरान ऑब्जर्वेबल से तत्व प्राप्त करेगा। इस मामले में, इसका मतलब यह है कि जब मान 2 से भिन्न हो।

निष्पादन से, आप देख सकते हैं कि दो अलग-अलग तंत्र कैसे काम करते हैं:

$ node observable.mjs
Received by 1 value: 1
Received by 1 value: 2
Received by 1 value: 3
Observable 1 completed
Received by 2 value: 1
$

निष्कर्ष

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

लॉगरॉकेट: संदर्भ को समझकर जावास्क्रिप्ट त्रुटियों को अधिक आसानी से डीबग करें

कोड डिबगिंग हमेशा एक कठिन काम होता है। लेकिन जितना अधिक आप अपनी त्रुटियों को समझेंगे, उन्हें ठीक करना उतना ही आसान होगा।

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

LogRocket कंसोल लॉग, पेज लोड समय, स्टैक ट्रेस, हेडर बॉडी के साथ धीमे नेटवर्क अनुरोध/प्रतिक्रियाएं, ब्राउज़र मेटाडेटा और कस्टम लॉग रिकॉर्ड करता है। आपके जावास्क्रिप्ट कोड के प्रभाव को समझना कभी आसान नहीं होगा!

इसका उपयोग मुफ्त में करें।