ஜாவாஸ்கிரிப்ட் AbortController: ஒத்திசைவற்ற செயல்பாடுகளை ரத்து செய்வதில் தேர்ச்சி பெறுதல்

நவீன வலைதள மேம்பாட்டில், ஒத்திசைவற்ற செயல்பாடுகள் சர்வ சாதாரணமாக உள்ளன. API-களிலிருந்து தரவைப் பெறுவது, டைமர்களை அமைப்பது மற்றும் பயனர் தொடர்புகளைக் கையாள்வது போன்றவை பெரும்பாலும் தன்னிச்சையாகவும் நீண்ட நேரத்திற்கும் இயங்கும் குறியீட்டைக் கொண்டுள்ளன. இருப்பினும், இந்த செயல்பாடுகள் முடிவடைவதற்கு முன்பு அவற்றை ரத்து செய்ய வேண்டிய சில சூழல்கள் உள்ளன. இங்குதான் ஜாவாஸ்கிரிப்டில் உள்ள 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();

விளக்கம்:

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;

asynv 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 உடன் ரத்து செய்தல்

setTimeout அல்லது setInterval மூலம் உருவாக்கப்பட்ட டைமர்களை ரத்து செய்ய AbortSignal-ஐப் பயன்படுத்தலாம். இதற்கு இன்னும் கொஞ்சம் கைமுறை வேலை தேவைப்படும், ஏனெனில் உள்ளமைக்கப்பட்ட டைமர் செயல்பாடுகள் நேரடியாக 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-ஐ அமைத்து, டைம்அவுட் ஐடியைச் சேமிக்கிறது.
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. கிளீனப் செயல்பாட்டிற்குள், fetch கோரிக்கையை ரத்து செய்ய controller.abort()-ஐ அழைக்கிறோம்.

மேம்பட்ட பயன்பாட்டு வழக்குகள்

AbortSignals-ஐ சங்கிலியாக்குதல்

சில நேரங்களில், நீங்கள் பல AbortSignal-களை ஒன்றாகச் சங்கிலியாக்க விரும்பலாம். எடுத்துக்காட்டாக, உங்களிடம் ஒரு பெற்றோர் காம்போனென்ட் இருக்கலாம், அது அதன் குழந்தை காம்போனென்ட்களில் செயல்பாடுகளை ரத்து செய்ய வேண்டும். ஒரு புதிய AbortController-ஐ உருவாக்கி, அதன் சிக்னலை பெற்றோர் மற்றும் குழந்தை காம்போனென்ட்கள் இரண்டிற்கும் அனுப்புவதன் மூலம் இதை நீங்கள் அடையலாம்.

மூன்றாம் தரப்பு நூலகங்களுடன் AbortController-ஐப் பயன்படுத்துதல்

நீங்கள் AbortSignal-ஐ நேரடியாக ஆதரிக்காத மூன்றாம் தரப்பு நூலகத்தைப் பயன்படுத்துகிறீர்கள் என்றால், நூலகத்தின் ரத்து பொறிமுறையுடன் வேலை செய்ய உங்கள் குறியீட்டை நீங்கள் மாற்றியமைக்க வேண்டியிருக்கலாம். இது நூலகத்தின் ஒத்திசைவற்ற செயல்பாடுகளை AbortSignal-ஐக் கையாளும் உங்கள் சொந்த செயல்பாடுகளில் போர்த்துவதை உள்ளடக்கியிருக்கலாம்.

AbortController-ஐப் பயன்படுத்துவதன் நன்மைகள்

• மேம்பட்ட செயல்திறன்: தேவையற்ற செயல்பாடுகளை ரத்து செய்வது நெட்வொர்க் டிராஃபிக், CPU பயன்பாடு மற்றும் மெமரி நுகர்வைக் குறைக்கும், இது குறிப்பாக வளக் கட்டுப்பாடுகள் உள்ள சாதனங்களில் மேம்பட்ட செயல்திறனுக்கு வழிவகுக்கும்.
• சுத்தமான குறியீடு: AbortController ரத்துசெய்தலை நிர்வகிக்க ஒரு தரப்படுத்தப்பட்ட மற்றும் நேர்த்தியான வழியை வழங்குகிறது, இது உங்கள் குறியீட்டை மேலும் படிக்கக்கூடியதாகவும் பராமரிக்கக்கூடியதாகவும் ஆக்குகிறது.
• மெமரி லீக்ஸ் தடுப்பு: நீக்கப்பட்ட காம்போனென்ட்களுடன் தொடர்புடைய ஒத்திசைவற்ற செயல்பாடுகளை ரத்து செய்வது மெமரி லீக்ஸ் மற்றும் நீக்கப்பட்ட காம்போனென்ட்களைப் புதுப்பிப்பதால் ஏற்படும் பிழைகளைத் தடுக்கிறது.
• சிறந்த பயனர் அனுபவம்: பொருத்தமற்ற கோரிக்கைகளை ரத்து செய்வது காலாவதியான தகவல்கள் காட்டப்படுவதைத் தடுப்பதன் மூலமும், உணரப்பட்ட தாமதத்தைக் குறைப்பதன் மூலமும் பயனர் அனுபவத்தை மேம்படுத்தும்.

உலாவி இணக்கத்தன்மை

AbortController Chrome, Firefox, Safari, மற்றும் Edge உள்ளிட்ட நவீன உலாவிகளில் பரவலாக ஆதரிக்கப்படுகிறது. சமீபத்திய தகவல்களுக்கு MDN வலை ஆவணங்களில் உள்ள இணக்கத்தன்மை அட்டவணையை நீங்கள் சரிபார்க்கலாம்.

பாலிஃபில்கள்

AbortController-ஐ இயல்பாக ஆதரிக்காத பழைய உலாவிகளுக்கு, நீங்கள் ஒரு பாலிஃபில்லைப் பயன்படுத்தலாம். பாலிஃபில் என்பது பழைய உலாவிகளில் ஒரு புதிய அம்சத்தின் செயல்பாட்டை வழங்கும் ஒரு குறியீட்டுத் துண்டாகும். ஆன்லைனில் பல AbortController பாலிஃபில்கள் கிடைக்கின்றன.

முடிவுரை

AbortController இடைமுகம் ஜாவாஸ்கிரிப்டில் ஒத்திசைவற்ற செயல்பாடுகளை நிர்வகிப்பதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். AbortController-ஐப் பயன்படுத்துவதன் மூலம், நீங்கள் சுத்தமான, அதிக செயல்திறன் மிக்க, மற்றும் ரத்துசெய்தலை அழகாகக் கையாளும் வலுவான குறியீட்டை எழுதலாம். நீங்கள் API-களிலிருந்து தரவைப் பெறுகிறீர்களா, டைமர்களை அமைக்கிறீர்களா, அல்லது நிகழ்வு கேட்பவர்களை நிர்வகிக்கிறீர்களா, AbortController உங்கள் வலைப் பயன்பாடுகளின் ஒட்டுமொத்த தரத்தை மேம்படுத்த உதவும்.

மேலும் படிக்க

• MDN வலை ஆவணங்கள்: AbortController
• WHATWG DOM வாழும் தரம்: AbortController