JavaScript AbortController: अतुल्यकालिक संचालन रद्दीकरण में महारत हासिल करना

आधुनिक वेब विकास में, अतुल्यकालिक संचालन सर्वव्यापी हैं। API से डेटा लाना, टाइमर सेट करना और उपयोगकर्ता इंटरैक्शन को संभालना अक्सर ऐसे कोड शामिल होते हैं जो स्वतंत्र रूप से और संभावित रूप से विस्तारित अवधि के लिए चलते हैं। हालांकि, ऐसे परिदृश्य हैं जहां आपको इन ऑपरेशनों को पूरा होने से पहले रद्द करने की आवश्यकता होती है। यहीं पर JavaScript में AbortController इंटरफ़ेस बचाव के लिए आता है। यह DOM संचालन और अन्य अतुल्यकालिक कार्यों के लिए रद्दीकरण अनुरोधों को संकेत देने का एक स्वच्छ और कुशल तरीका प्रदान करता है।

रद्दीकरण की आवश्यकता को समझना

तकनीकी विवरणों में गोता लगाने से पहले, आइए समझते हैं कि अतुल्यकालिक संचालन को रद्द करना क्यों महत्वपूर्ण है। इन सामान्य परिदृश्यों पर विचार करें:

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

AbortController और AbortSignal का परिचय

AbortController इंटरफ़ेस को अतुल्यकालिक संचालन को रद्द करने की समस्या को हल करने के लिए डिज़ाइन किया गया है। इसमें दो मुख्य घटक होते हैं:

• AbortController: यह ऑब्जेक्ट रद्दीकरण संकेत का प्रबंधन करता है। इसमें एक एकल विधि, abort() है, जिसका उपयोग रद्दीकरण अनुरोध को संकेत देने के लिए किया जाता है।
• AbortSignal: यह ऑब्जेक्ट उस संकेत का प्रतिनिधित्व करता है जिसे किसी ऑपरेशन को बाधित किया जाना चाहिए। यह AbortController से जुड़ा होता है और रद्द किए जाने वाले अतुल्यकालिक संचालन में पारित किया जाता है।

मूल उपयोग: Fetch अनुरोधों को रद्द करना

आइए एक fetch अनुरोध को रद्द करने के एक सरल उदाहरण से शुरू करें:

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  });

// Fetch अनुरोध को रद्द करने के लिए:
controller.abort();

स्पष्टीकरण:

1. हम एक AbortController इंस्टेंस बनाते हैं।
2. हम controller से संबद्ध AbortSignal प्राप्त करते हैं।
3. हम fetch विकल्पों में signal पारित करते हैं।
4. यदि हमें अनुरोध रद्द करने की आवश्यकता है, तो हम controller.abort() को कॉल करते हैं।
5. .catch() ब्लॉक में, हम जांचते हैं कि क्या त्रुटि AbortError है। यदि यह है, तो हम जानते हैं कि अनुरोध रद्द कर दिया गया था।

AbortError को संभालना

जब controller.abort() को कॉल किया जाता है, तो fetch अनुरोध एक AbortError के साथ अस्वीकृत हो जाएगा। अपने कोड में इस त्रुटि को उचित रूप से संभालना महत्वपूर्ण है। ऐसा करने में विफल रहने से अनियंत्रित प्रॉमिस अस्वीकृतियाँ और अप्रत्याशित व्यवहार हो सकता है।

यहां त्रुटि प्रबंधन के साथ एक अधिक मजबूत उदाहरण दिया गया है:

const controller = new AbortController();
const signal = controller.signal;

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data', { signal });
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log('Data:', data);
    return data;
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
      return null; // या आगे के संचालन के लिए त्रुटि को थ्रो करें
    } else {
      console.error('Fetch error:', error);
      throw error; // आगे के संचालन के लिए त्रुटि को पुनः थ्रो करें
    }
  }
}

fetchData();

// Fetch अनुरोध को रद्द करने के लिए:
controller.abort();

AbortError को संभालने के लिए सर्वोत्तम प्रथाएँ:

• त्रुटि नाम की जाँच करें: यह सुनिश्चित करने के लिए हमेशा जांचें कि क्या error.name === 'AbortError' आप सही त्रुटि प्रकार को संभाल रहे हैं।
• डिफ़ॉल्ट मान लौटाएँ या पुनः थ्रो करें: आपके एप्लिकेशन के तर्क के आधार पर, आप एक डिफ़ॉल्ट मान (जैसे, null) लौटाना या कॉल स्टैक में आगे संभालने के लिए त्रुटि को पुनः थ्रो करना चाह सकते हैं।
• संसाधनों को साफ़ करें: यदि अतुल्यकालिक संचालन ने कोई संसाधन (जैसे, टाइमर, ईवेंट श्रोता) आवंटित किया है, तो उन्हें AbortError हैंडलर में साफ़ करें।

AbortSignal के साथ टाइमर रद्द करना

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

function cancellableTimeout(callback, delay, signal) {
  let timeoutId;

  const timeoutPromise = new Promise((resolve, reject) => {
    timeoutId = setTimeout(() => {
      resolve(callback());
    }, delay);

    signal.addEventListener('abort', () => {
      clearTimeout(timeoutId);
      reject(new Error('Timeout Aborted'));
    });
  });

  return timeoutPromise;
}

const controller = new AbortController();
const signal = controller.signal;


cancellableTimeout(() => {
  console.log('Timeout executed');
}, 2000, signal)
.then(() => console.log("Timeout finished successfully"))
.catch(err => console.log(err));

// टाइमआउट रद्द करने के लिए:
controller.abort();

स्पष्टीकरण:

1. cancellableTimeout फ़ंक्शन एक कॉलबैक, एक विलंब और एक AbortSignal को तर्क के रूप में लेता है।
2. यह एक setTimeout सेट करता है और टाइमआउट आईडी को संग्रहीत करता है।
3. यह AbortSignal में एक ईवेंट श्रोता जोड़ता है जो abort ईवेंट के लिए सुनता है।
4. जब abort ईवेंट ट्रिगर होता है, तो ईवेंट श्रोता टाइमआउट को साफ़ करता है और प्रॉमिस को अस्वीकृत करता है।

ईवेंट श्रोताओं को रद्द करना

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

const controller = new AbortController();
const signal = controller.signal;

const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log('Button clicked!');
}, { signal });

// ईवेंट श्रोता को रद्द करने के लिए:
controller.abort();

स्पष्टीकरण:

1. हम addEventListener विधि के लिए एक विकल्प के रूप में signal पारित करते हैं।
2. जब controller.abort() को कॉल किया जाता है, तो ईवेंट श्रोता स्वचालित रूप से हटा दिया जाएगा।

React घटकों में AbortController

React में, आप किसी घटक के अनमाउंट होने पर अतुल्यकालिक संचालन को रद्द करने के लिए AbortController का उपयोग कर सकते हैं। मेमोरी लीक और अनमाउंटेड घटकों को अपडेट करने के कारण होने वाली त्रुटियों को रोकने के लिए यह आवश्यक है। यहां useEffect हुक का उपयोग करने का एक उदाहरण दिया गया है:

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data', { signal });
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const data = await response.json();
        setData(data);
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          console.error('Fetch error:', error);
        }
      }
    }

    fetchData();

    return () => {
      controller.abort(); // घटक अनमाउंट होने पर fetch अनुरोध रद्द करें
    };
  }, []); // खाली निर्भरता सरणी सुनिश्चित करती है कि यह प्रभाव केवल माउंट पर एक बार चलता है

  return (
    

      {data ? (
        
Data: {JSON.stringify(data)}
      ) : (
        
Loading...
      )}
    
  );
}

export default MyComponent;

स्पष्टीकरण:

1. हम useEffect हुक के भीतर एक AbortController बनाते हैं।
2. हम fetch अनुरोध में signal पारित करते हैं।
3. हम useEffect हुक से एक क्लीनअप फ़ंक्शन लौटाते हैं। यह फ़ंक्शन घटक अनमाउंट होने पर कहा जाएगा।
4. क्लीनअप फ़ंक्शन के अंदर, हम fetch अनुरोध को रद्द करने के लिए controller.abort() को कॉल करते हैं।

उन्नत उपयोग के मामले

AbortSignals को चेनिंग

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

तृतीय-पक्ष पुस्तकालयों के साथ AbortController का उपयोग करना

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

AbortController का उपयोग करने के लाभ

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

ब्राउज़र संगतता

AbortController आधुनिक ब्राउज़रों में व्यापक रूप से समर्थित है, जिसमें Chrome, Firefox, Safari और Edge शामिल हैं। आप नवीनतम जानकारी के लिए MDN Web Docs पर संगतता तालिका देख सकते हैं।

Polyfills

पुराने ब्राउज़रों के लिए जो मूल रूप से AbortController का समर्थन नहीं करते हैं, आप पॉलीफ़िल का उपयोग कर सकते हैं। पॉलीफ़िल कोड का एक टुकड़ा है जो पुराने ब्राउज़रों में नई सुविधा की कार्यक्षमता प्रदान करता है। ऑनलाइन कई AbortController पॉलीफ़िल उपलब्ध हैं।

निष्कर्ष

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

आगे पढ़ना

• MDN Web Docs: AbortController
• WHATWG DOM Living Standard: AbortController