AbortController API: Pieprasījumu atcelšanas un resursu pārvaldības apgūšana

Mūsdienu tīmekļa izstrādē efektīva asinhrono operāciju pārvaldība ir izšķiroša, lai veidotu atsaucīgas un veiktspējīgas lietojumprogrammas. AbortController API nodrošina jaudīgu mehānismu pieprasījumu atcelšanai un resursu pārvaldībai, nodrošinot labāku lietotāja pieredzi un novēršot nevajadzīgu slodzi. Šī visaptverošā rokasgrāmata detalizēti aplūko AbortController API, aptverot tā pamatkoncepcijas, praktiskus lietošanas gadījumus un progresīvas metodes.

Kas ir AbortController API?

AbortController API ir iebūvēts JavaScript API, kas ļauj pārtraukt vienu vai vairākus tīmekļa pieprasījumus. Tas sastāv no divām galvenajām sastāvdaļām:

• AbortController: Kontroliera objekts, kas uzsāk atcelšanas procesu.
• AbortSignal: Signāla objekts, kas saistīts ar AbortController un tiek nodots asinhronajai operācijai (piemēram, fetch pieprasījumam), lai uztvertu atcelšanas signālus.

Kad AbortController objektam tiek izsaukta abort() metode, saistītais AbortSignal izstaro abort notikumu, ko asinhronā operācija var uztvert un atbilstoši reaģēt. Tas ļauj eleganti atcelt pieprasījumus, novēršot nevajadzīgu datu pārsūtīšanu un apstrādi.

Pamatkoncepcijas

1. AbortController izveide

Lai izmantotu AbortController API, vispirms ir jāizveido AbortController klases instance:

const controller = new AbortController();

2. AbortSignal iegūšana

AbortController instance nodrošina piekļuvi AbortSignal objektam, izmantojot tā signal īpašību:

const signal = controller.signal;

3. AbortSignal nodošana asinhronai operācijai

AbortSignal pēc tam tiek nodots kā opcija asinhronajai operācijai, kuru vēlaties kontrolēt. Piemēram, izmantojot fetch API, jūs varat nodot signal kā daļu no opciju objekta:

fetch('/api/data', { signal })
 .then(response => response.json())
 .then(data => {
 console.log('Dati saņemti:', data);
 })
 .catch(error => {
 if (error.name === 'AbortError') {
 console.log('Fetch pārtraukts');
 } else {
 console.error('Fetch kļūda:', error);
 }
 });

4. Pieprasījuma pārtraukšana

Lai atceltu pieprasījumu, izsauciet abort() metodi AbortController instancei:

controller.abort();

Tas izraisīs abort notikumu saistītajā AbortSignal, liekot fetch pieprasījumam tikt noraidītam ar AbortError.

Praktiski lietošanas gadījumi

1. Fetch pieprasījumu atcelšana

Viens no biežākajiem AbortController API lietošanas gadījumiem ir fetch pieprasījumu atcelšana. Tas ir īpaši noderīgi gadījumos, kad lietotājs pāriet uz citu lapu vai veic darbību, kas padara notiekošo pieprasījumu nevajadzīgu. Apsveriet scenāriju, kurā lietotājs meklē produktus e-komercijas vietnē. Ja lietotājs ievada jaunu meklēšanas vaicājumu, pirms iepriekšējais meklēšanas pieprasījums ir pabeigts, AbortController var izmantot, lai atceltu iepriekšējo pieprasījumu, ietaupot joslas platumu un apstrādes jaudu.

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('Meklēšana pārtraukta');
 } else {
 console.error('Meklēšanas kļūda:', error);
 }
 });
}

function displayProducts(products) {
 // Parādīt produktus lietotāja saskarnē
 console.log('Produkti:', products);
}

// Lietošanas piemērs:
searchProducts('shoes');
searchProducts('shirts'); // Atceļ iepriekšējo meklēšanu pēc 'shoes'

2. Taimautu ieviešana

AbortController API var izmantot arī taimautu ieviešanai asinhronām operācijām. Tas nodrošina, ka pieprasījumi neuzkaras uz nenoteiktu laiku, ja serveris nereaģē. Tas ir svarīgi sadalītās sistēmās, kur tīkla latentums vai servera problēmas var izraisīt pieprasījumu izpildes laika pagarināšanos. Taimauta iestatīšana var novērst lietojumprogrammas iestrēgšanu, gaidot atbildi, kas var nekad nepienākt.

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);
 return await response.json();
 } catch (error) {
 clearTimeout(timeoutId);
 if (error.name === 'AbortError') {
 throw new Error('Pieprasījumam iestājās taimauts');
 } else {
 throw error;
 }
 }
}

// Lietošanas piemērs:
fetchDataWithTimeout('/api/data', 5000) // 5 sekunžu taimauts
 .then(data => {
 console.log('Dati saņemti:', data);
 })
 .catch(error => {
 console.error('Kļūda:', error.message);
 });

3. Vairāku asinhrono operāciju pārvaldība

AbortController API var izmantot, lai vienlaikus pārvaldītu vairākas asinhronas operācijas. Tas ir noderīgi gadījumos, kad nepieciešams atcelt saistītu pieprasījumu grupu. Piemēram, iedomājieties informācijas paneļa lietojumprogrammu, kas iegūst datus no vairākiem avotiem. Ja lietotājs pāriet prom no informācijas paneļa, visi neapstiprinātie pieprasījumi ir jāatceļ, lai atbrīvotu resursus.

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

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

async function fetchData(url) {
 try {
 const response = await fetch(url, { signal });
 return await response.json();
 } catch (error) {
 if (error.name === 'AbortError') {
 console.log(`Fetch pārtraukts ${url}`);
 } else {
 console.error(`Fetch kļūda ${url}:`, error);
 }
 throw error;
 }
}

Promise.all(urls.map(fetchData))
 .then(results => {
 console.log('Visi dati saņemti:', results);
 })
 .catch(error => {
 console.error('Kļūda datu iegūšanā:', error);
 });

// Lai atceltu visus pieprasījumus:
controller.abort();

Progresīvas metodes

1. AbortController izmantošana ar notikumu klausītājiem

AbortController API var izmantot arī notikumu klausītāju (event listeners) pārvaldībai. Tas ir noderīgi, lai "sakoptu" notikumu klausītājus, kad komponents tiek noņemts vai notiek konkrēts notikums. Piemēram, veidojot pielāgotu video atskaņotāju, jūs varētu vēlēties pievienot notikumu klausītājus 'play', 'pause' un 'ended' notikumiem. AbortController izmantošana nodrošina, ka šie klausītāji tiek pareizi noņemti, kad atskaņotājs vairs nav nepieciešams, novēršot atmiņas noplūdes.

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

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

// Lietošanas piemērs:
const controller = new AbortController();
const signal = controller.signal;
const button = document.getElementById('myButton');

function handleClick() {
 console.log('Poga nospiesta!');
}

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

// Lai noņemtu notikumu klausītāju:
controller.abort();

2. AbortSignals savienošana ķēdē

Dažos gadījumos var būt nepieciešams savienot vairākus AbortSignals ķēdē. Tas ļauj izveidot atcelšanas signālu hierarhiju, kur viena signāla pārtraukšana automātiski pārtrauc visus tā bērnus. To var panākt, izveidojot palīgfunkciju, kas apvieno vairākus signālus vienā signālā. Iedomājieties sarežģītu darbplūsmu, kurā vairāki komponenti ir atkarīgi viens no otra. Ja viens komponents neizdodas vai tiek atcelts, jūs varētu vēlēties automātiski atcelt visus atkarīgos komponentus.

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

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

 return controller.signal;
}

// Lietošanas piemērs:
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('Dati saņemti:', data);
 })
 .catch(error => {
 if (error.name === 'AbortError') {
 console.log('Fetch pārtraukts');
 } else {
 console.error('Fetch kļūda:', error);
 }
 });

// Pārtraucot controller1, tiks pārtraukts arī fetch pieprasījums:
controller1.abort();

3. AbortErrors globāla apstrāde

Lai uzlabotu koda uzturēšanu, varat izveidot globālu kļūdu apstrādātāju, lai uztvertu un apstrādātu AbortError izņēmumus. Tas var vienkāršot kļūdu apstrādi jūsu lietojumprogrammā un nodrošināt konsekventu uzvedību. To var izdarīt, izveidojot pielāgotu kļūdu apstrādes funkciju, kas pārbauda AbortErrors un veic atbilstošas darbības. Šī centralizētā pieeja atvieglo kļūdu apstrādes loģikas atjaunināšanu un nodrošina konsekvenci visā lietojumprogrammā.

function handleAbortError(error) {
 if (error.name === 'AbortError') {
 console.log('Pieprasījums globāli pārtraukts');
 // Veikt nepieciešamo tīrīšanu vai UI atjauninājumus
 }
}

// Lietošanas piemērs:
fetch('/api/data')
 .then(response => response.json())
 .then(data => {
 console.log('Dati saņemti:', data);
 })
 .catch(error => {
 handleAbortError(error);
 console.error('Fetch kļūda:', error);
 });

Kļūdu apstrāde

Kad pieprasījums tiek pārtraukts, izmantojot AbortController API, fetch solījums (promise) tiek noraidīts ar AbortError. Ir svarīgi pareizi apstrādāt šo kļūdu, lai novērstu neparedzētu uzvedību jūsu lietojumprogrammā.

fetch('/api/data', { signal })
 .then(response => response.json())
 .then(data => {
 console.log('Dati saņemti:', data);
 })
 .catch(error => {
 if (error.name === 'AbortError') {
 console.log('Fetch pārtraukts');
 // Veikt nepieciešamo tīrīšanu vai UI atjauninājumus
 } else {
 console.error('Fetch kļūda:', error);
 // Apstrādāt citas kļūdas
 }
 });

Kļūdu apstrādes blokā jūs varat pārbaudīt, vai nav AbortError, pārbaudot error.name īpašību. Ja kļūda ir AbortError, varat veikt jebkuru nepieciešamo tīrīšanu vai UI atjauninājumus, piemēram, parādot ziņojumu lietotājam vai atiestatot lietojumprogrammas stāvokli.

Labākās prakses

• Vienmēr apstrādājiet AbortError izņēmumus: Pārliecinieties, ka jūsu kods eleganti apstrādā AbortError izņēmumus, lai novērstu neparedzētu uzvedību.
• Izmantojiet aprakstošus kļūdu ziņojumus: Nodrošiniet skaidrus un informatīvus kļūdu ziņojumus, lai palīdzētu izstrādātājiem atkļūdot un novērst problēmas.
• Sakopiet resursus: Kad pieprasījums tiek pārtraukts, sakopiet visus saistītos resursus, piemēram, taimerus vai notikumu klausītājus, lai novērstu atmiņas noplūdes.
• Apsveriet taimauta vērtības: Iestatiet atbilstošas taimauta vērtības asinhronām operācijām, lai novērstu pieprasījumu bezgalīgu uzkāršanos.
• Izmantojiet AbortController ilgstošām operācijām: Operācijām, kuru pabeigšana var aizņemt ilgu laiku, izmantojiet AbortController API, lai ļautu lietotājiem nepieciešamības gadījumā atcelt operāciju.

Pārlūkprogrammu saderība

AbortController API ir plaši atbalstīts modernās pārlūkprogrammās, tostarp Chrome, Firefox, Safari un Edge. Tomēr vecākas pārlūkprogrammas var neatbalstīt šo API. Lai nodrošinātu saderību ar vecākām pārlūkprogrammām, varat izmantot polifilu (polyfill). Ir pieejami vairāki polifili, kas nodrošina AbortController funkcionalitāti vecākām pārlūkprogrammām. Šos polifilus var viegli integrēt jūsu projektā, izmantojot pakotņu pārvaldniekus, piemēram, npm vai yarn.

AbortController nākotne

AbortController API ir tehnoloģija, kas attīstās, un nākotnes specifikācijas versijas var ieviest jaunas funkcijas un uzlabojumus. Sekošana līdzi jaunākajiem AbortController API notikumiem ir izšķiroša, lai veidotu modernas un efektīvas tīmekļa lietojumprogrammas. Sekojiet līdzi pārlūkprogrammu atjauninājumiem un JavaScript standartiem, lai izmantotu jaunās iespējas, tiklīdz tās kļūst pieejamas.

Noslēgums

AbortController API ir vērtīgs rīks asinhrono operāciju pārvaldībai JavaScript valodā. Nodrošinot mehānismu pieprasījumu atcelšanai un resursu pārvaldībai, tas ļauj izstrādātājiem veidot atsaucīgākas, veiktspējīgākas un lietotājam draudzīgākas tīmekļa lietojumprogrammas. Izpratne par AbortController API pamatkoncepcijām, praktiskiem lietošanas gadījumiem un progresīvām metodēm ir būtiska mūsdienu tīmekļa izstrādē. Apgūstot šo API, izstrādātāji var izveidot stabilas un efektīvas lietojumprogrammas, kas nodrošina labāku lietotāja pieredzi.