JavaScript AbortController: असिंक्रोनस ऑपरेशन्स रद्द करण्यात प्राविण्य

आधुनिक वेब डेव्हलपमेंटमध्ये, असिंक्रोनस ऑपरेशन्स सर्वव्यापी आहेत. APIs मधून डेटा आणणे, टायमर्स सेट करणे, आणि वापरकर्त्याच्या इंटरॅक्शन्स हाताळणे यांसारख्या क्रियांमध्ये असा कोड समाविष्ट असतो जो स्वतंत्रपणे आणि संभाव्यतः दीर्घ कालावधीसाठी चालतो. तथापि, काही परिस्थितींमध्ये तुम्हाला ही ऑपरेशन्स पूर्ण होण्यापूर्वी रद्द करण्याची आवश्यकता असते. इथेच जावास्क्रिप्टमधील 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);
    }
  });

// To cancel the fetch request:
controller.abort();

स्पष्टीकरण:

आपण एक AbortController इन्स्टन्स तयार करतो.
आपण controller मधून संबंधित AbortSignal मिळवतो.
आपण signal fetch च्या पर्यायांमध्ये पास करतो.
जर आपल्याला रिक्वेस्ट रद्द करायची असेल, तर आपण controller.abort() कॉल करतो.
.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; // Or throw the error to be handled further up
    } else {
      console.error('Fetch error:', error);
      throw error; // Re-throw the error to be handled further up
    }
  }
}

fetchData();

// To cancel the fetch request:
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));

// To cancel the timeout:
controller.abort();

स्पष्टीकरण:

cancellableTimeout फंक्शन एक कॉलबॅक, डिले आणि एक AbortSignal वितर्क म्हणून घेते.
ते एक setTimeout सेट करते आणि टाइमआउट आयडी संग्रहित करते.
ते AbortSignal मध्ये एक इव्हेंट लिसनर जोडते जो abort इव्हेंटसाठी ऐकतो.
जेव्हा abort इव्हेंट ट्रिगर होतो, तेव्हा इव्हेंट लिसनर टाइमआउट क्लिअर करतो आणि प्रॉमिस रिजेक्ट करतो.

इव्हेंट लिसनर्स रद्द करणे

टायमर्सप्रमाणेच, तुम्ही इव्हेंट लिसनर्स रद्द करण्यासाठी AbortSignal वापरू शकता. हे विशेषतः तेव्हा उपयुक्त आहे जेव्हा तुम्ही अनमाउंट होत असलेल्या कंपोनेंटशी संबंधित इव्हेंट लिसनर्स काढून टाकू इच्छिता.


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

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

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

// To cancel the event listener:
controller.abort();

स्पष्टीकरण:

आपण signal addEventListener मेथडला एक पर्याय म्हणून पास करतो.
जेव्हा 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(); // Cancel the fetch request when the component unmounts
    };
  }, []); // Empty dependency array ensures this effect runs only once on mount

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

export default MyComponent;

स्पष्टीकरण:

आपण useEffect हुकमध्ये एक AbortController तयार करतो.
आपण signal fetch रिक्वेस्टला पास करतो.
आपण useEffect हुकमधून एक क्लीनअप फंक्शन परत करतो. हे फंक्शन कंपोनेंट अनमाउंट झाल्यावर कॉल केले जाईल.
क्लीनअप फंक्शनच्या आत, आपण फेच रिक्वेस्ट रद्द करण्यासाठी controller.abort() कॉल करतो.

प्रगत वापर प्रकरणे

AbortSignals जोडणे

कधीकधी, तुम्हाला अनेक AbortSignal एकत्र जोडण्याची इच्छा असू शकते. उदाहरणार्थ, तुमच्याकडे एक पॅरेंट कंपोनेंट असू शकतो ज्याला त्याच्या चाइल्ड कंपोनेंट्समधील ऑपरेशन्स रद्द करण्याची आवश्यकता असते. तुम्ही नवीन AbortController तयार करून आणि त्याचा सिग्नल पॅरेंट आणि चाइल्ड दोन्ही कंपोनेंट्सना पास करून हे साध्य करू शकता.

थर्ड-पार्टी लायब्ररींसह AbortController वापरणे

जर तुम्ही अशी थर्ड-पार्टी लायब्ररी वापरत असाल जी थेट AbortSignal ला सपोर्ट करत नाही, तर तुम्हाला लायब्ररीच्या कॅन्सलेशन मेकॅनिझमसोबत काम करण्यासाठी तुमचा कोड जुळवून घ्यावा लागेल. यामध्ये लायब्ररीच्या असिंक्रोनस फंक्शन्सना तुमच्या स्वतःच्या फंक्शन्समध्ये रॅप करणे समाविष्ट असू शकते जे AbortSignal हाताळतात.

AbortController वापरण्याचे फायदे

सुधारित कार्यक्षमता: अनावश्यक ऑपरेशन्स रद्द केल्याने नेटवर्क ट्रॅफिक, सीपीयू वापर आणि मेमरी वापर कमी होतो, ज्यामुळे विशेषतः संसाधन-मर्यादित डिव्हाइसेसवर कार्यक्षमता सुधारते.
स्वच्छ कोड: AbortController कॅन्सलेशन व्यवस्थापित करण्यासाठी एक प्रमाणित आणि सुबक मार्ग प्रदान करतो, ज्यामुळे तुमचा कोड अधिक वाचनीय आणि देखरेख करण्यायोग्य बनतो.
मेमरी लीक प्रतिबंध: अनमाउंटेड कंपोनेंट्सशी संबंधित असिंक्रोनस ऑपरेशन्स रद्द केल्याने मेमरी लीक आणि अनमाउंटेड कंपोनेंट्स अपडेट केल्यामुळे होणाऱ्या त्रुटी टाळता येतात.
उत्तम वापरकर्ता अनुभव: अप्रासंगिक रिक्वेस्ट्स रद्द केल्याने कालबाह्य माहिती प्रदर्शित होण्यापासून रोखून आणि जाणवणारी विलंबता कमी करून वापरकर्त्याचा अनुभव सुधारतो.

ब्राउझर सुसंगतता

AbortController Chrome, Firefox, Safari आणि Edge सह आधुनिक ब्राउझरमध्ये मोठ्या प्रमाणावर समर्थित आहे. नवीनतम माहितीसाठी तुम्ही MDN वेब डॉक्सवरील सुसंगतता सारणी तपासू शकता.

पॉलीफिल्स

जुन्या ब्राउझरसाठी जे मूळतः AbortController ला सपोर्ट करत नाहीत, तुम्ही पॉलीफील वापरू शकता. पॉलीफील हा कोडचा एक भाग आहे जो जुन्या ब्राउझरमध्ये नवीन वैशिष्ट्याची कार्यक्षमता प्रदान करतो. ऑनलाइन अनेक AbortController पॉलीफील्स उपलब्ध आहेत.

निष्कर्ष

AbortController इंटरफेस जावास्क्रिप्टमध्ये असिंक्रोनस ऑपरेशन्स व्यवस्थापित करण्यासाठी एक शक्तिशाली साधन आहे. AbortController वापरून, तुम्ही अधिक स्वच्छ, अधिक कार्यक्षम आणि अधिक मजबूत कोड लिहू शकता जो कॅन्सलेशन योग्यरित्या हाताळतो. तुम्ही APIs मधून डेटा आणत असाल, टायमर्स सेट करत असाल, किंवा इव्हेंट लिसनर्स व्यवस्थापित करत असाल, AbortController तुम्हाला तुमच्या वेब ऍप्लिकेशन्सची एकूण गुणवत्ता सुधारण्यात मदत करू शकतो.

JavaScript AbortController: असिंक्रोनस ऑपरेशन्स रद्द करण्यात प्राविण्य

रद्द करण्याची गरज समजून घेणे

AbortController आणि AbortSignal ची ओळख

मूलभूत वापर: Fetch रिक्वेस्ट्स रद्द करणे

AbortError हाताळणे

AbortSignal सह टायमर्स रद्द करणे

इव्हेंट लिसनर्स रद्द करणे

React कंपोनेंट्समध्ये AbortController

प्रगत वापर प्रकरणे

AbortSignals जोडणे

थर्ड-पार्टी लायब्ररींसह AbortController वापरणे

AbortController वापरण्याचे फायदे

ब्राउझर सुसंगतता

पॉलीफिल्स

निष्कर्ष

अधिक वाचन