AbortController ஏபிஐ: கோரிக்கை ரத்து மற்றும் வள மேலாண்மையில் தேர்ச்சி பெறுதல்

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

AbortController ஏபிஐ என்றால் என்ன?

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

• AbortController: ரத்து செய்யும் செயல்முறையைத் தொடங்கும் கண்ட்ரோலர் ஆப்ஜெக்ட்.
• AbortSignal: AbortController உடன் தொடர்புடைய ஒரு சிக்னல் ஆப்ஜெக்ட், இது ரத்து சிக்னல்களைக் கேட்க ஒத்திசைவற்ற செயல்பாட்டிற்கு (எ.கா., ஒரு fetch கோரிக்கை) அனுப்பப்படுகிறது.

AbortController-ல் abort() மெத்தட் அழைக்கப்படும்போது, அதனுடன் தொடர்புடைய AbortSignal ஒரு abort நிகழ்வை வெளியிடுகிறது, அதை ஒத்திசைவற்ற செயல்பாடு கேட்டு அதற்கேற்ப பதிலளிக்க முடியும். இது கோரிக்கைகளை சீராக ரத்து செய்ய அனுமதிக்கிறது, தேவையற்ற தரவுப் பரிமாற்றம் மற்றும் செயலாக்கத்தைத் தடுக்கிறது.

முக்கிய கருத்துகள்

1. ஒரு AbortController-ஐ உருவாக்குதல்

AbortController ஏபிஐ-ஐப் பயன்படுத்த, நீங்கள் முதலில் AbortController வகுப்பின் ஒரு நிகழ்வை உருவாக்க வேண்டும்:

const controller = new AbortController();

2. AbortSignal-ஐப் பெறுதல்

AbortController நிகழ்வு அதன் signal பண்பு மூலம் ஒரு AbortSignal ஆப்ஜெக்ட்டிற்கான அணுகலை வழங்குகிறது:

const signal = controller.signal;

3. AbortSignal-ஐ ஒரு ஒத்திசைவற்ற செயல்பாட்டிற்கு அனுப்புதல்

AbortSignal பின்னர் நீங்கள் கட்டுப்படுத்த விரும்பும் ஒத்திசைவற்ற செயல்பாட்டிற்கு ஒரு விருப்பமாக அனுப்பப்படுகிறது. எடுத்துக்காட்டாக, fetch ஏபிஐ-ஐப் பயன்படுத்தும்போது, விருப்பங்கள் ஆப்ஜெக்ட்டின் ஒரு பகுதியாக signal-ஐ அனுப்பலாம்:

fetch('/api/data', { signal })
 .then(response => response.json())
 .then(data => {
 console.log('தரவு பெறப்பட்டது:', data);
 })
 .catch(error => {
 if (error.name === 'AbortError') {
 console.log('Fetch ரத்து செய்யப்பட்டது');
 } else {
 console.error('Fetch பிழை:', error);
 }
 });

4. கோரிக்கையை ரத்து செய்தல்

கோரிக்கையை ரத்து செய்ய, AbortController நிகழ்வில் abort() மெத்தடை அழைக்கவும்:

controller.abort();

இது தொடர்புடைய AbortSignal-ல் abort நிகழ்வைத் தூண்டும், இதனால் fetch கோரிக்கை ஒரு AbortError உடன் நிராகரிக்கப்படும்.

நடைமுறைப் பயன்பாடுகள்

1. Fetch கோரிக்கைகளை ரத்து செய்தல்

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

let controller = null;

function searchProducts(query) {
 if (controller) {
 controller.abort();
 }

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

 fetch(`/api/products?q=${query}`, { signal })
 .then(response => response.json())
 .then(products => {
 displayProducts(products);
 })
 .catch(error => {
 if (error.name === 'AbortError') {
 console.log('தேடல் ரத்து செய்யப்பட்டது');
 } else {
 console.error('தேடல் பிழை:', error);
 }
 });
}

function displayProducts(products) {
 // UI-ல் தயாரிப்புகளைக் காண்பிக்கவும்
 console.log('தயாரிப்புகள்:', products);
}

// எடுத்துக்காட்டு பயன்பாடு:
searchProducts('shoes');
searchProducts('shirts'); // 'shoes' க்கான முந்தைய தேடலை ரத்து செய்கிறது

2. நேரக்கட்டுப்பாடுகளை செயல்படுத்துதல்

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

asynс 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);
 return await response.json();
 } catch (error) {
 clearTimeout(timeoutId);
 if (error.name === 'AbortError') {
 throw new Error('கோரிக்கை நேரம் முடிந்தது');
 } else {
 throw error;
 }
 }
}

// எடுத்துக்காட்டு பயன்பாடு:
fetchDataWithTimeout('/api/data', 5000) // 5 வினாடிகள் நேரக்கட்டுப்பாடு
 .then(data => {
 console.log('தரவு பெறப்பட்டது:', data);
 })
 .catch(error => {
 console.error('பிழை:', error.message);
 });

3. பல ஒத்திசைவற்ற செயல்பாடுகளை நிர்வகித்தல்

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

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

const urls = [
 '/api/data1',
 '/api/data2',
 '/api/data3'
];

asynс function fetchData(url) {
 try {
 const response = await fetch(url, { signal });
 return await response.json();
 } catch (error) {
 if (error.name === 'AbortError') {
 console.log(`${url} க்கான Fetch ரத்து செய்யப்பட்டது`);
 } else {
 console.error(`${url} க்கான Fetch பிழை:`, error);
 }
 throw error;
 }
}

Promise.all(urls.map(fetchData))
 .then(results => {
 console.log('அனைத்து தரவுகளும் பெறப்பட்டன:', results);
 })
 .catch(error => {
 console.error('தரவைப் பெறுவதில் பிழை:', error);
 });

// அனைத்து கோரிக்கைகளையும் ரத்து செய்ய:
controller.abort();

மேம்பட்ட நுட்பங்கள்

1. நிகழ்வு கேட்பான்களுடன் AbortController-ஐப் பயன்படுத்துதல்

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

function addEventListenerWithAbort(element, eventType, listener, signal) {
 element.addEventListener(eventType, listener);

 signal.addEventListener('abort', () => {
 element.removeEventListener(eventType, listener);
 });
}

// எடுத்துக்காட்டு பயன்பாடு:
const controller = new AbortController();
const signal = controller.signal;
const button = document.getElementById('myButton');

function handleClick() {
 console.log('பொத்தான் கிளிக் செய்யப்பட்டது!');
}

addEventListenerWithAbort(button, 'click', handleClick, signal);

// நிகழ்வு கேட்பானை அகற்ற:
controller.abort();

2. AbortSignal-களை சங்கிலித் தொடராக்குதல்

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

function combineAbortSignals(...signals) {
 const controller = new AbortController();

 signals.forEach(signal => {
 if (signal) {
 signal.addEventListener('abort', () => {
 controller.abort();
 });
 }
 });

 return controller.signal;
}

// எடுத்துக்காட்டு பயன்பாடு:
const controller1 = new AbortController();
const controller2 = new AbortController();
const combinedSignal = combineAbortSignals(controller1.signal, controller2.signal);

fetch('/api/data', { signal: combinedSignal })
 .then(response => response.json())
 .then(data => {
 console.log('தரவு பெறப்பட்டது:', data);
 })
 .catch(error => {
 if (error.name === 'AbortError') {
 console.log('Fetch ரத்து செய்யப்பட்டது');
 } else {
 console.error('Fetch பிழை:', error);
 }
 });

// controller1-ஐ ரத்து செய்வது fetch கோரிக்கையையும் ரத்து செய்யும்:
controller1.abort();

3. AbortError-களை உலகளவில் கையாளுதல்

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

function handleAbortError(error) {
 if (error.name === 'AbortError') {
 console.log('கோரிக்கை உலகளவில் ரத்து செய்யப்பட்டது');
 // தேவையான சுத்தம் அல்லது UI புதுப்பிப்புகளைச் செய்யவும்
 }
}

// எடுத்துக்காட்டு பயன்பாடு:
fetch('/api/data')
 .then(response => response.json())
 .then(data => {
 console.log('தரவு பெறப்பட்டது:', data);
 })
 .catch(error => {
 handleAbortError(error);
 console.error('Fetch பிழை:', error);
 });

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

AbortController ஏபிஐ-ஐப் பயன்படுத்தி ஒரு கோரிக்கை ரத்து செய்யப்படும்போது, fetch ப்ராமிஸ் ஒரு AbortError உடன் நிராகரிக்கப்படுகிறது. உங்கள் பயன்பாட்டில் எதிர்பாராத நடத்தையைத் தடுக்க இந்த பிழையை சரியான முறையில் கையாள்வது முக்கியம்.

fetch('/api/data', { signal })
 .then(response => response.json())
 .then(data => {
 console.log('தரவு பெறப்பட்டது:', data);
 })
 .catch(error => {
 if (error.name === 'AbortError') {
 console.log('Fetch ரத்து செய்யப்பட்டது');
 // தேவையான சுத்தம் அல்லது UI புதுப்பிப்புகளைச் செய்யவும்
 } else {
 console.error('Fetch பிழை:', error);
 // மற்ற பிழைகளைக் கையாளவும்
 }
 });

பிழை கையாளும் தொகுதியில், error.name பண்பை ஆராய்வதன் மூலம் AbortError-ஐ சரிபார்க்கலாம். பிழை ஒரு AbortError ஆக இருந்தால், பயனருக்கு ஒரு செய்தியைக் காண்பிப்பது அல்லது பயன்பாட்டின் நிலையை மீட்டமைப்பது போன்ற தேவையான சுத்தம் அல்லது UI புதுப்பிப்புகளை நீங்கள் செய்யலாம்.

சிறந்த நடைமுறைகள்

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

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

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

AbortController-இன் எதிர்காலம்

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

முடிவுரை

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