ஜாவாஸ்கிரிப்ட் AbortController: கோரிக்கை ரத்து வடிவங்களை கையாளுதல்

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

AbortController என்றால் என்ன?

AbortController என்பது ஜாவாஸ்கிரிப்டில் உள்ளமைக்கப்பட்ட ஒரு API ஆகும், இது ஒன்று அல்லது அதற்கு மேற்பட்ட வலைக் கோரிக்கைகளை ரத்து செய்ய உங்களை அனுமதிக்கிறது. இது ஒரு செயல்பாடு ரத்து செய்யப்பட வேண்டும் என்பதற்கான சமிக்ஞையை வழங்குகிறது, தேவையற்ற நெட்வொர்க் போக்குவரத்து மற்றும் வளப் பயன்பாட்டைத் தடுக்கிறது. AbortController ஆனது AbortSignal உடன் இணைந்து செயல்படுகிறது, இது ரத்து செய்யப்பட வேண்டிய ஒத்திசைவற்ற செயல்பாட்டிற்கு அனுப்பப்படுகிறது. இரண்டும் சேர்ந்து, ஒத்திசைவற்ற பணிகளை நிர்வகிக்க ஒரு சக்திவாய்ந்த மற்றும் நெகிழ்வான வழிமுறையை வழங்குகின்றன.

AbortController-ஐ ஏன் பயன்படுத்த வேண்டும்?

AbortController-ஐப் பயன்படுத்துவதால் பல சூழ்நிலைகள் பயனடைகின்றன:

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

அடிப்படைப் பயன்பாடு

fetch API உடன் AbortController-ஐ எவ்வாறு பயன்படுத்துவது என்பதைக் காட்டும் ஒரு அடிப்படை எடுத்துக்காட்டு இங்கே:

எடுத்துக்காட்டு 1: எளிய 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);
 })
 .catch(error => {
  if (error.name === 'AbortError') {
   console.log('Fetch aborted');
  } else {
   console.error('Fetch error:', error);
  }
 });

// Abort the fetch request after 5 seconds
setTimeout(() => {
 controller.abort();
}, 5000);

            

              
                Copy
              
            
          

விளக்கம்:

• ஒரு புதிய AbortController உருவாக்கப்படுகிறது.
• AbortController-இன் signal பண்பு fetch விருப்பங்களுக்கு அனுப்பப்படுகிறது.
• controller.abort()-ஐ அழைப்பதன் மூலம் 5 விநாடிகளுக்குப் பிறகு கோரிக்கையை ரத்து செய்ய ஒரு setTimeout செயல்பாடு பயன்படுத்தப்படுகிறது.
• கோரிக்கை ரத்து செய்யப்படும்போது தூக்கி எறியப்படும் AbortError-ஐ catch பிளாக் கையாளுகிறது.

மேம்பட்ட ரத்து வடிவங்கள்

அடிப்படை எடுத்துக்காட்டைத் தாண்டி, AbortController-ஐ திறம்படப் பயன்படுத்த பல மேம்பட்ட வடிவங்கள் உள்ளன.

வடிவம் 1: காம்பொனென்ட் அன்மவுன்ட்டில் ரத்து செய்தல் (React எடுத்துக்காட்டு)

React போன்ற காம்பொனென்ட்-அடிப்படையிலான கட்டமைப்புகளில், ஒரு காம்பொனென்ட் மவுன்ட் ஆகும்போது கோரிக்கைகளைத் தொடங்கி, அது அன்மவுன்ட் ஆகும்போது அவற்றை ரத்து செய்வது பொதுவானது. இது மெமரி லீக்குகளைத் தடுக்கிறது மற்றும் இனி தெரியாத காம்பொனென்ட்டுகளுக்கான தரவைச் செயலாக்குவதை பயன்பாடு தொடராமல் இருப்பதை உறுதி செய்கிறது.

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

function DataComponent() {
 const [data, setData] = useState(null);
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState(null);

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

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

  fetchData();

  return () => {
   controller.abort(); // Cleanup function to abort the request
  };
 }, []); // Empty dependency array ensures this runs only on mount/unmount

 if (loading) return 
Loading...
;
 if (error) return 
Error: {error.message}
;

 return (
  

   
Data:
   
{JSON.stringify(data, null, 2)}
  
 );
}

export default DataComponent;

            

              
                Copy
              
            
          

விளக்கம்:

• useEffect ஹூக், காம்பொனென்ட் மவுன்ட் ஆகும்போது பக்க விளைவுகளை (இந்த வழக்கில், தரவைப் பெறுதல்) செய்யப் பயன்படுகிறது.
• AbortController, useEffect ஹூக்கிற்குள் உருவாக்கப்படுகிறது.
• useEffect மூலம் திருப்பியனுப்பப்படும் க்ளீன்அப் செயல்பாடு, காம்பொனென்ட் அன்மவுன்ட் ஆகும்போது controller.abort()-ஐ அழைக்கிறது, இது நடந்துகொண்டிருக்கும் கோரிக்கைகள் ரத்து செய்யப்படுவதை உறுதி செய்கிறது.
• useEffect-க்கு ஒரு வெற்று சார்பு வரிசை ([]) அனுப்பப்படுகிறது, இது எஃபெக்ட் மவுன்ட் ஆகும்போது ஒரு முறையும், அன்மவுன்ட் ஆகும்போது ஒரு முறையும் மட்டுமே இயங்க வேண்டும் என்பதைக் குறிக்கிறது.

வடிவம் 2: Debouncing மற்றும் Throttling

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

எடுத்துக்காட்டு: AbortController உடன் Debounced தேடல்

            function debouncedSearch(query, delay = 300) {
 let controller = null; // Keep the controller in the scope
 return function() {
    if (controller) {
      controller.abort(); // Abort previous request
    }

    controller = new AbortController(); // Create a new AbortController
    const signal = controller.signal;
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        fetch(`https://api.example.com/search?q=${query}`, { signal })
          .then(response => {
            if (!response.ok) {
              throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json(); 
          })
          .then(data => {
            resolve(data);
          })
          .catch(error => {
              if (error.name === 'AbortError') {
                console.log('Search Aborted for: ' + query);
              } else {
                reject(error);
              }
          });
      }, delay);
    });
  };
}

// Usage Example:
const search = debouncedSearch('Example Query');
search().then(results => console.log(results)).catch(error => console.error(error)); //Initial search
search().then(results => console.log(results)).catch(error => console.error(error)); //Another search; aborts the previous
search().then(results => console.log(results)).catch(error => console.error(error)); //...and another

            

              
                Copy
              
            
          

விளக்கம்:

• debouncedSearch செயல்பாடு, தேடல் செயல்பாட்டின் ஒரு debounced பதிப்பைத் திருப்பியனுப்புகிறது.
• ஒவ்வொரு முறையும் debounced செயல்பாடு அழைக்கப்படும்போது, அது முதலில் controller.abort()-ஐப் பயன்படுத்தி முந்தைய கோரிக்கைகளை ரத்து செய்கிறது.
• பின்னர் ஒரு புதிய AbortController உருவாக்கப்பட்டு, ஒரு புதிய கோரிக்கையைத் தொடங்கப் பயன்படுத்தப்படுகிறது.
• setTimeout செயல்பாடு கோரிக்கை செய்யப்படுவதற்கு முன்பு ஒரு தாமதத்தை அறிமுகப்படுத்துகிறது, இது பயனர் ஒரு குறிப்பிட்ட காலத்திற்கு தட்டச்சு செய்வதை நிறுத்திய பின்னரே தேடல் செய்யப்படுவதை உறுதி செய்கிறது.

வடிவம் 3: பல AbortSignal-களை இணைத்தல்

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

இந்த வடிவம் நேரடியாக ஆதரிக்கப்படவில்லை, மேலும் உங்கள் சொந்த இணைப்பு தர்க்கத்தை நீங்கள் பொதுவாக செயல்படுத்துவீர்கள்.

வடிவம் 4: காலக்கெடு மற்றும் காலாவதி நேரங்கள்

கோரிக்கைகளுக்கான காலக்கெடுவை அமைப்பது, அவை காலவரையின்றி தொங்கிக்கொண்டிருப்பதைத் தடுக்க மிகவும் முக்கியமானது. AbortController-ஐப் பயன்படுத்தி காலக்கெடுவை எளிதாக செயல்படுத்தலாம்.

            async function fetchDataWithTimeout(url, timeout) {
 const controller = new AbortController();
 const signal = controller.signal;

 const timeoutId = setTimeout(() => {
  controller.abort();
 }, timeout);

 try {
  const response = await fetch(url, { signal });
  clearTimeout(timeoutId); // Clear timeout if request completes successfully

  if (!response.ok) {
   throw new Error(`HTTP error! status: ${response.status}`);
  }
  return await response.json();
 } catch (error) {
  clearTimeout(timeoutId); // Clear timeout in case of any error
  throw error;
 }
}

// Usage:
fetchDataWithTimeout('https://api.example.com/data', 3000) // 3 seconds timeout
 .then(data => console.log(data))
 .catch(error => console.error(error));

            

              
                Copy
              
            
          

விளக்கம்:

• fetchDataWithTimeout செயல்பாடு ஒரு URL மற்றும் ஒரு காலக்கெடு மதிப்பை உள்ளீடுகளாக எடுத்துக்கொள்கிறது.
• குறிப்பிட்ட காலக்கெடுவுக்குப் பிறகு கோரிக்கையை ரத்து செய்ய ஒரு setTimeout செயல்பாடு பயன்படுத்தப்படுகிறது.
• கோரிக்கை வெற்றிகரமாக முடிந்தாலோ அல்லது பிழை ஏற்பட்டாலோ காலக்கெடு அழிக்கப்படுவதை உறுதி செய்ய try மற்றும் catch பிளாக்குகளில் clearTimeout செயல்பாடு அழைக்கப்படுகிறது.

உலகளாவிய பரிசீலனைகள் மற்றும் சிறந்த நடைமுறைகள்

உலகளாவிய சூழலில் AbortController உடன் பணிபுரியும் போது, பின்வருவனவற்றைக் கருத்தில் கொள்வது அவசியம்:

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

பிழை கையாளுதல்

AbortController-ஐப் பயன்படுத்தும் போது சரியான பிழை கையாளுதல் மிக முக்கியமானது. எப்போதும் AbortError-ஐச் சரிபார்த்து, அதை முறையாகக் கையாளவும்.

            try {
 // ... fetch code ...
} catch (error) {
 if (error.name === 'AbortError') {
  console.log('Request was aborted');
  // Perform any necessary cleanup or UI updates
 } else {
  console.error('An error occurred:', error);
  // Handle other errors
 }
}

            

              
                Copy
              
            
          

முடிவுரை

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

மேலே கோடிட்டுக் காட்டப்பட்டுள்ள வடிவங்களைப் பயன்படுத்துவதன் மூலம், டெவலப்பர்கள் நம்பிக்கையுடன் ஒத்திசைவற்ற செயல்பாடுகளை நிர்வகிக்கலாம், வளப் பயன்பாட்டை மேம்படுத்தலாம் மற்றும் மாறுபட்ட சூழல்கள் மற்றும் உலகளாவிய பார்வையாளர்களுக்கு விதிவிலக்கான பயனர் அனுபவங்களை வழங்கலாம்.

இந்த விரிவான வழிகாட்டி ஜாவாஸ்கிரிப்டின் AbortController-ஐப் பயன்படுத்தி கோரிக்கை ரத்து வடிவங்களைக் கையாளுவதற்கு ஒரு உறுதியான அடித்தளத்தை வழங்க வேண்டும். மகிழ்ச்சியான கோடிங்!