જાવાસ્ક્રિપ્ટ AbortController: અસિંક્રોનસ ઓપરેશન કેન્સલેશનમાં નિપુણતા

આધુનિક વેબ ડેવલપમેન્ટમાં, અસિંક્રોનસ ઓપરેશન્સ સર્વવ્યાપક છે. APIs માંથી ડેટા મેળવવો, ટાઈમર સેટ કરવા અને યુઝર ઇન્ટરેક્શનને હેન્ડલ કરવામાં મોટાભાગે એવો કોડ શામેલ હોય છે જે સ્વતંત્ર રીતે અને સંભવિતપણે લાંબા સમય સુધી ચાલે છે. જોકે, એવા સંજોગો છે જ્યાં તમારે આ ઓપરેશન્સને પૂર્ણ થાય તે પહેલાં રદ કરવાની જરૂર પડે છે. આ તે સ્થાન છે જ્યાં જાવાસ્ક્રિપ્ટમાં AbortController ઇન્ટરફેસ બચાવમાં આવે છે. તે DOM ઓપરેશન્સ અને અન્ય અસિંક્રોનસ કાર્યોને કેન્સલેશન વિનંતીઓનો સંકેત આપવા માટે એક સ્વચ્છ અને કાર્યક્ષમ રીત પ્રદાન કરે છે.

કેન્સલેશનની જરૂરિયાતને સમજવી

તકનીકી વિગતોમાં ઊંડા ઉતરતા પહેલા, ચાલો સમજીએ કે અસિંક્રોનસ ઓપરેશન્સને રદ કરવું શા માટે મહત્વપૂર્ણ છે. આ સામાન્ય દૃશ્યોનો વિચાર કરો:

• યુઝર નેવિગેશન: યુઝર સર્ચ ક્વેરી શરૂ કરે છે, જે API રિક્વેસ્ટને ટ્રિગર કરે છે. જો તેઓ રિક્વેસ્ટ પૂર્ણ થાય તે પહેલાં ઝડપથી બીજા પેજ પર નેવિગેટ કરે છે, તો મૂળ રિક્વેસ્ટ બિનજરૂરી બની જાય છે અને બિનજરૂરી નેટવર્ક ટ્રાફિક અને સંભવિત આડઅસરોને ટાળવા માટે તેને રદ કરવી જોઈએ.
• ટાઇમઆઉટ મેનેજમેન્ટ: તમે અસિંક્રોનસ ઓપરેશન માટે ટાઇમઆઉટ સેટ કરો છો. જો ટાઇમઆઉટ સમાપ્ત થાય તે પહેલાં ઓપરેશન પૂર્ણ થઈ જાય, તો તમારે બિનજરૂરી કોડ એક્ઝેક્યુશનને રોકવા માટે ટાઇમઆઉટ રદ કરવું જોઈએ.
• કમ્પોનન્ટ અનમાઉન્ટિંગ: React અથવા Vue.js જેવા ફ્રન્ટ-એન્ડ ફ્રેમવર્કમાં, કમ્પોનન્ટ્સ વારંવાર અસિંક્રોનસ રિક્વેસ્ટ કરે છે. જ્યારે કોઈ કમ્પોનન્ટ અનમાઉન્ટ થાય છે, ત્યારે તે કમ્પોનન્ટ સાથે સંકળાયેલી કોઈપણ ચાલુ રિક્વેસ્ટને મેમરી લીક અને અનમાઉન્ટ થયેલા કમ્પોનન્ટ્સને અપડેટ કરવાથી થતી ભૂલોને ટાળવા માટે રદ કરવી જોઈએ.
• રિસોર્સ કન્સ્ટ્રેઇન્ટ્સ: રિસોર્સ-કન્સ્ટ્રેઇન્ટ વાતાવરણમાં (દા.ત., મોબાઇલ ઉપકરણો, એમ્બેડેડ સિસ્ટમ્સ), બિનજરૂરી ઓપરેશન્સને રદ કરવાથી મૂલ્યવાન રિસોર્સિસ મુક્ત થઈ શકે છે અને પ્રદર્શન સુધારી શકાય છે. ઉદાહરણ તરીકે, જો યુઝર પેજના તે વિભાગમાંથી સ્ક્રોલ કરીને આગળ વધી જાય તો મોટી ઇમેજ ડાઉનલોડને રદ કરવી.

AbortController અને AbortSignal નો પરિચય

AbortController ઇન્ટરફેસ અસિંક્રોનસ ઓપરેશન્સને રદ કરવાની સમસ્યાને હલ કરવા માટે રચાયેલ છે. તેમાં બે મુખ્ય ઘટકો છે:

• AbortController: આ ઓબ્જેક્ટ કેન્સલેશન સિગ્નલનું સંચાલન કરે છે. તેની પાસે એક જ મેથડ છે, abort(), જેનો ઉપયોગ કેન્સલેશન રિક્વેસ્ટનો સંકેત આપવા માટે થાય છે.
• AbortSignal: આ ઓબ્જેક્ટ એ સંકેતનું પ્રતિનિધિત્વ કરે છે કે કોઈ ઓપરેશન રદ થવું જોઈએ. તે AbortController સાથે સંકળાયેલ છે અને તેને તે અસિંક્રોનસ ઓપરેશનમાં પાસ કરવામાં આવે છે જેને રદ કરી શકાય તેવું બનાવવાની જરૂર છે.

મૂળભૂત ઉપયોગ: Fetch Requests રદ કરવી

ચાલો 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();

સમજૂતી:

1. આપણે એક AbortController ઇન્સ્ટન્સ બનાવીએ છીએ.
2. આપણે controller માંથી સંકળાયેલ AbortSignal મેળવીએ છીએ.
3. આપણે signal ને fetch ઓપ્શન્સમાં પાસ કરીએ છીએ.
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; // 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();

સમજૂતી:

1. cancellableTimeout ફંક્શન એક કૉલબેક, એક ડિલે, અને એક AbortSignal ને આર્ગ્યુમેન્ટ તરીકે લે છે.
2. તે setTimeout સેટ કરે છે અને ટાઇમઆઉટ ID ને સ્ટોર કરે છે.
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 });

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

સમજૂતી:

1. આપણે signal ને addEventListener મેથડમાં એક ઓપ્શન તરીકે પાસ કરીએ છીએ.
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(); // 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;

સમજૂતી:

1. આપણે useEffect હૂકની અંદર એક AbortController બનાવીએ છીએ.
2. આપણે signal ને fetch રિક્વેસ્ટમાં પાસ કરીએ છીએ.
3. આપણે useEffect હૂકમાંથી એક ક્લીનઅપ ફંક્શન પરત કરીએ છીએ. આ ફંક્શન ત્યારે કૉલ થશે જ્યારે કમ્પોનન્ટ અનમાઉન્ટ થશે.
4. ક્લીનઅપ ફંક્શનની અંદર, આપણે ફેચ રિક્વેસ્ટને રદ કરવા માટે controller.abort() ને કૉલ કરીએ છીએ.

એડવાન્સ્ડ ઉપયોગના કિસ્સાઓ

AbortSignals ને ચેઇન કરવું

કેટલીકવાર, તમે બહુવિધ AbortSignals ને એકસાથે ચેઇન કરવા માંગતા હોવ છો. ઉદાહરણ તરીકે, તમારી પાસે એક પેરેન્ટ કમ્પોનન્ટ હોઈ શકે છે જેને તેના ચાઇલ્ડ કમ્પોનન્ટ્સમાં ઓપરેશન્સ રદ કરવાની જરૂર હોય. તમે એક નવો AbortController બનાવીને અને તેના સિગ્નલને પેરેન્ટ અને ચાઇલ્ડ બંને કમ્પોનન્ટ્સમાં પાસ કરીને આ પ્રાપ્ત કરી શકો છો.

થર્ડ-પાર્ટી લાઇબ્રેરીઓ સાથે AbortController નો ઉપયોગ કરવો

જો તમે એવી થર્ડ-પાર્ટી લાઇબ્રેરીનો ઉપયોગ કરી રહ્યાં છો જે સીધા AbortSignal ને સપોર્ટ કરતી નથી, તો તમારે લાઇબ્રેરીની કેન્સલેશન મિકેનિઝમ સાથે કામ કરવા માટે તમારા કોડને અનુકૂળ બનાવવાની જરૂર પડી શકે છે. આમાં લાઇબ્રેરીના અસિંક્રોનસ ફંક્શન્સને તમારા પોતાના ફંક્શન્સમાં રેપ કરવાનો સમાવેશ થઈ શકે છે જે AbortSignal ને હેન્ડલ કરે છે.

AbortController નો ઉપયોગ કરવાના ફાયદા

• સુધારેલું પ્રદર્શન: બિનજરૂરી ઓપરેશન્સ રદ કરવાથી નેટવર્ક ટ્રાફિક, CPU વપરાશ અને મેમરી વપરાશમાં ઘટાડો થઈ શકે છે, જેનાથી પ્રદર્શનમાં સુધારો થાય છે, ખાસ કરીને રિસોર્સ-કન્સ્ટ્રેઇન્ટ ઉપકરણો પર.
• વધુ સ્વચ્છ કોડ: AbortController કેન્સલેશનનું સંચાલન કરવા માટે એક પ્રમાણભૂત અને સુઘડ રીત પ્રદાન કરે છે, જે તમારા કોડને વધુ વાંચવા યોગ્ય અને જાળવવા યોગ્ય બનાવે છે.
• મેમરી લીકની રોકથામ: અનમાઉન્ટેડ કમ્પોનન્ટ્સ સાથે સંકળાયેલા અસિંક્રોનસ ઓપરેશન્સને રદ કરવાથી મેમરી લીક અને અનમાઉન્ટેડ કમ્પોનન્ટ્સને અપડેટ કરવાથી થતી ભૂલો અટકે છે.
• વધુ સારો યુઝર અનુભવ: બિનજરૂરી રિક્વેસ્ટ્સ રદ કરવાથી જૂની માહિતી પ્રદર્શિત થતી અટકાવીને અને અનુભવાતી લેટન્સી ઘટાડીને યુઝર અનુભવમાં સુધારો થઈ શકે છે.

બ્રાઉઝર સુસંગતતા

AbortController ને Chrome, Firefox, Safari, અને Edge સહિતના આધુનિક બ્રાઉઝર્સમાં વ્યાપકપણે સપોર્ટ કરવામાં આવે છે. નવીનતમ માહિતી માટે તમે MDN વેબ ડોક્સ પર સુસંગતતા ટેબલ ચકાસી શકો છો.

પોલીફિલ્સ

જૂના બ્રાઉઝર્સ માટે જે મૂળભૂત રીતે AbortController ને સપોર્ટ કરતા નથી, તમે પોલીફિલનો ઉપયોગ કરી શકો છો. પોલીફિલ એ કોડનો એક ટુકડો છે જે જૂના બ્રાઉઝર્સમાં નવી સુવિધાની કાર્યક્ષમતા પ્રદાન કરે છે. ઓનલાઈન ઘણા AbortController પોલીફિલ્સ ઉપલબ્ધ છે.

નિષ્કર્ષ

AbortController ઇન્ટરફેસ જાવાસ્ક્રિપ્ટમાં અસિંક્રોનસ ઓપરેશન્સનું સંચાલન કરવા માટે એક શક્તિશાળી સાધન છે. AbortController નો ઉપયોગ કરીને, તમે વધુ સ્વચ્છ, વધુ કાર્યક્ષમ અને વધુ મજબૂત કોડ લખી શકો છો જે કેન્સલેશનને સરળતાથી હેન્ડલ કરે છે. ભલે તમે APIs માંથી ડેટા મેળવી રહ્યા હો, ટાઈમર સેટ કરી રહ્યા હો, અથવા ઇવેન્ટ લિસનર્સનું સંચાલન કરી રહ્યા હો, AbortController તમને તમારી વેબ એપ્લિકેશન્સની એકંદર ગુણવત્તા સુધારવામાં મદદ કરી શકે છે.

વધુ વાંચન

• MDN વેબ ડોક્સ: AbortController
• WHATWG DOM લિવિંગ સ્ટાન્ડર્ડ: AbortController