JavaScript AbortController apgūšana: nevainojama pieprasījumu atcelšana

Mūsdienu tīmekļa izstrādes dinamiskajā pasaulē asinhronās operācijas ir atsaucīgas un saistošas lietotāju pieredzes pamats. Sākot ar datu ielādi no API un beidzot ar lietotāju mijiedarbību apstrādi, JavaScript bieži saskaras ar uzdevumiem, kuru izpilde var prasīt laiku. Tomēr, kas notiek, ja lietotājs pamet lapu, pirms pieprasījums ir pabeigts, vai kad nākamais pieprasījums aizstāj iepriekšējo? Bez pienācīgas pārvaldības šīs notiekošās operācijas var novest pie izšķērdētiem resursiem, novecojušiem datiem un pat negaidītām kļūdām. Tieši šeit mirdz JavaScript AbortController API, piedāvājot stabilu un standartizētu mehānismu asinhrono operāciju atcelšanai.

Nepieciešamība atcelt pieprasījumus

Apsveriet tipisku scenāriju: lietotājs raksta meklēšanas joslā, un ar katru taustiņsitienu jūsu lietojumprogramma veic API pieprasījumu, lai iegūtu meklēšanas ieteikumus. Ja lietotājs raksta ātri, vienlaicīgi var tikt izpildīti vairāki pieprasījumi. Ja lietotājs pāriet uz citu lapu, kamēr šie pieprasījumi ir gaidīšanas stāvoklī, atbildes, ja tās pienāks, būs neatbilstošas, un to apstrāde būtu vērtīgu klienta puses resursu izšķērdēšana. Turklāt serveris, iespējams, jau ir apstrādājis šos pieprasījumus, radot nevajadzīgas skaitļošanas izmaksas.

Cita izplatīta situācija ir, kad lietotājs uzsāk darbību, piemēram, faila augšupielādi, bet pēc tam nolemj to atcelt pusceļā. Vai varbūt ilgstoša operācija, piemēram, liela datu kopas ielāde, vairs nav nepieciešama, jo ir veikts jauns, atbilstošāks pieprasījums. Visos šajos gadījumos spēja graciozi pārtraukt šīs notiekošās operācijas ir izšķiroša, lai:

• Uzlabotu lietotāja pieredzi: Novērš novecojušu vai neatbilstošu datu attēlošanu, izvairās no nevajadzīgiem lietotāja saskarnes atjauninājumiem un uztur lietojumprogrammas ātrdarbību.
• Optimizētu resursu izmantošanu: Ietaupa joslas platumu, nelejupielādējot nevajadzīgus datus, samazina CPU ciklus, neapstrādājot pabeigtas, bet nevajadzīgas operācijas, un atbrīvo atmiņu.
• Novērstu sacensību apstākļus (race conditions): Nodrošina, ka tiek apstrādāti tikai jaunākie atbilstošie dati, izvairoties no scenārijiem, kur vecāka, aizstāta pieprasījuma atbilde pārraksta jaunākus datus.

Iepazīstinām ar AbortController API

AbortController saskarne nodrošina veidu, kā signalizēt atcelšanas pieprasījumu vienai vai vairākām JavaScript asinhronajām operācijām. Tā ir izstrādāta darbam ar API, kas atbalsta AbortSignal, īpaši ar moderno fetch API.

Savā būtībā AbortController ir divas galvenās sastāvdaļas:

• AbortController instance: Šis ir objekts, kuru jūs izveidojat, lai radītu jaunu atcelšanas mehānismu.
• signal īpašība: Katrai AbortController instancei ir signal īpašība, kas ir AbortSignal objekts. Šo AbortSignal objektu jūs nododat asinhronajai operācijai, kuru vēlaties spēt atcelt.

AbortController ir arī viena metode:

• abort(): Šīs metodes izsaukšana AbortController instancei nekavējoties iedarbina saistīto AbortSignal, atzīmējot to kā atceltu. Jebkura operācija, kas klausās šo signālu, tiks paziņota un varēs attiecīgi rīkoties.

Kā AbortController darbojas ar Fetch

fetch API ir primārais un visbiežākais AbortController lietošanas gadījums. Veicot fetch pieprasījumu, jūs varat nodot AbortSignal objektu options objektā. Ja signāls tiek atcelts, fetch operācija tiks priekšlaicīgi pārtraukta.

Pamata piemērs: viena Fetch pieprasījuma atcelšana

Ilustrēsim ar vienkāršu piemēru. Iedomāsimies, ka mēs vēlamies iegūt datus no API, bet mēs vēlamies spēt atcelt šo pieprasījumu, ja lietotājs nolemj pāriet uz citu lapu, pirms tas ir pabeigts.

```javascript // Izveidojam jaunu AbortController instanci const controller = new AbortController(); const signal = controller.signal; // API galapunkta URL const apiUrl = 'https://api.example.com/data'; console.log('Uzsākam fetch pieprasījumu...'); fetch(apiUrl, { signal: signal // Nododam signālu fetch opcijām }) .then(response => { if (!response.ok) { throw new Error(`HTTP kļūda! statuss: ${response.status}`); } return response.json(); }) .then(data => { console.log('Dati saņemti:', data); // Apstrādājam saņemtos datus }) .catch(error => { if (error.name === 'AbortError') { console.log('Fetch pieprasījums tika atcelts.'); } else { console.error('Fetch kļūda:', error); } }); // Simulējam pieprasījuma atcelšanu pēc 5 sekundēm setTimeout(() => { console.log('Atceļam fetch pieprasījumu...'); controller.abort(); // Tas izsauks .catch bloku ar AbortError }, 5000); ```

Šajā piemērā:

• Mēs izveidojam AbortController un iegūstam tā signal.
• Mēs nododam šo signal fetch opcijām.
• Ja controller.abort() tiek izsaukts pirms fetch pabeigšanas, solījums, ko atgriež fetch, tiks noraidīts ar AbortError.
• .catch() bloks īpaši pārbauda šo AbortError, lai atšķirtu īstu tīkla kļūdu no atcelšanas.

Praktisks ieteikums: Vienmēr pārbaudiet error.name === 'AbortError' savos catch blokos, lietojot AbortController ar fetch, lai graciozi apstrādātu atcelšanas.

Vairāku pieprasījumu apstrāde ar vienu kontrolieri

Vienu AbortController var izmantot, lai atceltu vairākas operācijas, kas visas klausās tā signal. Tas ir neticami noderīgi scenārijos, kur lietotāja darbība var padarīt par spēkā neesošiem vairākus notiekošos pieprasījumus. Piemēram, ja lietotājs pamet informācijas paneļa lapu, jūs, iespējams, vēlēsities atcelt visus neapstiprinātos datu ielādes pieprasījumus, kas saistīti ar šo paneli.

```javascript const controller = new AbortController(); const signal = controller.signal; const apiUrl1 = 'https://api.example.com/users'; const apiUrl2 = 'https://api.example.com/products'; function fetchData(url, name) { console.log(`Uzsākam ${name} fetch pieprasījumu...`); return fetch(url, { signal: signal }) .then(response => { if (!response.ok) { throw new Error(`HTTP kļūda! statuss: ${response.status}`); } return response.json(); }) .then(data => { console.log(`${name} dati saņemti:`, data); }) .catch(error => { if (error.name === 'AbortError') { console.log(`${name} fetch pieprasījums tika atcelts.`); } else { console.error(`${name} fetch kļūda:`, error); } }); } // Uzsākam vairākus fetch pieprasījumus fetchData(apiUrl1, 'Lietotāji'); fetchData(apiUrl2, 'Produkti'); // Simulējam visu pieprasījumu atcelšanu pēc 7 sekundēm setTimeout(() => { console.log('Atceļam visus fetch pieprasījumus...'); controller.abort(); }, 7000); ```

Šeit gan 'Lietotāju', gan 'Produktu' fetch operācijas izmanto vienu un to pašu signal. Kad tiek izsaukts controller.abort(), abi pieprasījumi tiks pārtraukti.

Globālā perspektīva: Šis modelis ir nenovērtējams sarežģītām lietojumprogrammām ar daudziem komponentiem, kas var neatkarīgi iniciēt API izsaukumus. Piemēram, starptautiskai e-komercijas platformai var būt komponenti produktu sarakstiem, lietotāju profiliem un iepirkumu groza kopsavilkumiem, kas visi ielādē datus. Ja lietotājs ātri pārvietojas no vienas produktu kategorijas uz citu, viens abort() izsaukums var sakopt visus gaidošos pieprasījumus, kas saistīti ar iepriekšējo skatu.

`AbortSignal` notikumu klausītājs

Lai gan fetch automātiski apstrādā atcelšanas signālu, citām asinhronām operācijām var būt nepieciešama skaidra reģistrācija atcelšanas notikumiem. AbortSignal objekts nodrošina addEventListener metodi, kas ļauj klausīties 'abort' notikumu. Tas ir īpaši noderīgi, integrējot AbortController ar pielāgotu asinhrono loģiku vai bibliotēkām, kas tieši neatbalsta signal opciju savā konfigurācijā.

```javascript const controller = new AbortController(); const signal = controller.signal; function performLongTask(signal) { return new Promise((resolve, reject) => { const taskDuration = 10000; // Uzdevums aizņem 10 sekundes let elapsedTime = 0; const intervalId = setInterval(() => { elapsedTime += 1000; console.log(`Uzdevuma progress: ${elapsedTime / 1000}s`); if (elapsedTime >= taskDuration) { clearInterval(intervalId); resolve('Uzdevums veiksmīgi pabeigts!'); } }, 1000); // Klausāmies atcelšanas notikumu signal.addEventListener('abort', () => { clearInterval(intervalId); console.log('Ilgstošais uzdevums atcelts, izmantojot notikumu klausītāju.'); reject(new DOMException('Atcelts', 'AbortError')); }); }); } console.log('Sākam ilgstošo uzdevumu...'); performLongTask(signal) .then(result => console.log(result)) .catch(error => { if (error.name === 'AbortError') { console.log('Operācija tika atcelta.'); } else { console.error('Radās negaidīta kļūda:', error); } }); // Atceļam uzdevumu pēc 3 sekundēm setTimeout(() => { console.log('Uzsākam atcelšanu...'); controller.abort(); }, 3000); ```

Šajā piemērā:

• Funkcija performLongTask pieņem AbortSignal.
• Tā izveido intervālu, lai simulētu progresu.
• Būtiski, ka tā pievieno notikumu klausītāju signal objektam 'abort' notikumam. Kad notikums tiek iedarbināts, tā notīra intervālu un noraida solījumu ar AbortError.

Praktisks ieteikums: addEventListener('abort', callback) modelis ir būtisks pielāgotai asinhronajai loģikai, nodrošinot, ka jūsu kods var reaģēt uz atcelšanas signāliem no ārpuses.

`signal.aborted` īpašība

AbortSignal ir arī Būla īpašība, aborted, kas atgriež true, ja signāls ir atcelts, un false pretējā gadījumā. Lai gan to tieši neizmanto atcelšanas iniciēšanai, tā var būt noderīga, lai pārbaudītu signāla pašreizējo stāvokli jūsu asinhronajā loģikā.

```javascript const controller = new AbortController(); const signal = controller.signal; function checkStatus(signal) { if (signal.aborted) { console.log('Nevar pārbaudīt statusu, signāls jau ir atcelts.'); return; } console.log('Pārbaudām statusu...'); // Simulējam kādu darbu... setTimeout(() => { if (!signal.aborted) { console.log('Statusa pārbaude pabeigta.'); } else { console.log('Statusa pārbaude pārtraukta atcelšanas dēļ.'); } }, 2000); } checkStatus(signal); // Atceļam pēc 1 sekundes setTimeout(() => { console.log('Atceļam...'); controller.abort(); }, 1000); ```

Šajā koda fragmentā signal.aborted ļauj pārbaudīt stāvokli pirms turpināt ar potenciāli resursietilpīgām operācijām. Lai gan fetch API to apstrādā iekšēji, pielāgotai loģikai šādas pārbaudes varētu noderēt.

Ne tikai Fetch: citi lietošanas gadījumi

Lai gan fetch ir visredzamākais AbortController lietotājs, tā potenciāls attiecas uz jebkuru asinhronu operāciju, kuru var izstrādāt, lai klausītos AbortSignal. Tas ietver:

• Ilgstoši aprēķini: Web Workers, sarežģītas DOM manipulācijas vai intensīva datu apstrāde.
• Taimeri: Lai gan setTimeout un setInterval tieši nepieņem AbortSignal, jūs varat tos ietīt solījumos, kas to dara, kā parādīts performLongTask piemērā.
• Citas bibliotēkas: Daudzas modernas JavaScript bibliotēkas, kas strādā ar asinhronām operācijām (piem., dažas datu ielādes bibliotēkas, animāciju bibliotēkas), sāk integrēt atbalstu AbortSignal.

Piemērs: AbortController izmantošana ar Web Workers

Web Workers ir lieliski piemēroti smagu uzdevumu noņemšanai no galvenā pavediena. Jūs varat sazināties ar Web Worker un nodrošināt tam AbortSignal, lai atļautu atcelt darbu, kas tiek veikts worker'ī.

main.js

```javascript // Izveidojam Web Worker const worker = new Worker('worker.js'); // Izveidojam AbortController worker uzdevumam const controller = new AbortController(); const signal = controller.signal; console.log('Sūtam uzdevumu uz worker...'); // Nosūtām uzdevuma datus un signālu uz worker worker.postMessage({ task: 'processData', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], signal: signal // Piezīme: Signālus nevar tieši pārsūtīt šādā veidā. // Mums ir jānosūta ziņojums, ko worker var izmantot, lai // izveidotu savu signālu vai klausītos ziņojumus. // Praktiskāka pieeja ir nosūtīt ziņojumu par atcelšanu. }); // Izturīgāks veids, kā rīkoties ar signālu worker'os, ir ziņojumu nodošana: // Precizēsim: Mēs nosūtām 'start' ziņojumu un 'abort' ziņojumu. worker.postMessage({ command: 'startProcessing', payload: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }); worker.onmessage = function(event) { console.log('Ziņojums no worker:', event.data); }; // Simulējam worker uzdevuma atcelšanu pēc 3 sekundēm setTimeout(() => { console.log('Atceļam worker uzdevumu...'); // Nosūtām 'abort' komandu worker'im worker.postMessage({ command: 'abortProcessing' }); }, 3000); // Neaizmirstiet pārtraukt worker darbību, kad tas ir pabeigts // worker.terminate(); ```

worker.js

```javascript let processingInterval = null; let isAborted = false; self.onmessage = function(event) { const { command, payload } = event.data; if (command === 'startProcessing') { isAborted = false; console.log('Worker saņēma startProcessing komandu. Dati:', payload); let progress = 0; const total = payload.length; processingInterval = setInterval(() => { if (isAborted) { clearInterval(processingInterval); console.log('Worker: Apstrāde atcelta.'); self.postMessage({ status: 'aborted' }); return; } progress++; console.log(`Worker: Apstrādā vienumu ${progress}/${total}`); if (progress === total) { clearInterval(processingInterval); console.log('Worker: Apstrāde pabeigta.'); self.postMessage({ status: 'completed', result: 'Visi vienumi apstrādāti' }); } }, 500); } else if (command === 'abortProcessing') { console.log('Worker saņēma abortProcessing komandu.'); isAborted = true; // Intervāls pats sevi notīrīs nākamajā ciklā, pateicoties isAborted pārbaudei. } }; ```

Skaidrojums:

• Galvenajā pavedienā mēs izveidojam AbortController.
• Tā vietā, lai nodotu signal tieši (kas nav iespējams, jo tas ir sarežģīts objekts, ko nevar viegli pārsūtīt), mēs izmantojam ziņojumu nodošanu. Galvenais pavediens nosūta 'startProcessing' komandu un vēlāk 'abortProcessing' komandu.
• Worker klausās šīs komandas. Saņemot 'startProcessing', tas sāk savu darbu un iestata intervālu. Tas arī izmanto karodziņu, isAborted, kuru pārvalda 'abortProcessing' komanda.
• Kad isAborted kļūst par patiesu, worker intervāls pats sevi notīra un ziņo atpakaļ, ka uzdevums tika atcelts.

Praktisks ieteikums: Web Workers gadījumā ieviest uz ziņojumiem balstītu komunikācijas modeli, lai signalizētu par atcelšanu, efektīvi atdarinot AbortSignal uzvedību.

Labākā prakse un apsvērumi

Lai efektīvi izmantotu AbortController, paturiet prātā šo labāko praksi:

• Skaidri nosaukumi: Izmantojiet aprakstošus mainīgo nosaukumus saviem kontrolieriem (piemēram, dashboardFetchController, userProfileController), lai tos efektīvi pārvaldītu.
• Darbības jomas pārvaldība: Nodrošiniet, lai kontrolieru darbības joma būtu atbilstoša. Ja komponents tiek atvienots (unmount), atceliet visus ar to saistītos gaidošos pieprasījumus.
• Kļūdu apstrāde: Vienmēr atšķiriet AbortError no citām tīkla vai apstrādes kļūdām.
• Kontroliera dzīves cikls: Kontrolieris var atcelt tikai vienu reizi. Ja laika gaitā nepieciešams atcelt vairākas, neatkarīgas operācijas, jums būs nepieciešami vairāki kontrolieri. Tomēr viens kontrolieris var vienlaikus atcelt vairākas operācijas, ja tās visas koplieto tā signālu.
• DOM AbortSignal: Apzinieties, ka AbortSignal saskarne ir DOM standarts. Lai gan tas ir plaši atbalstīts, nodrošiniet saderību vecākām vidēm, ja nepieciešams (lai gan atbalsts parasti ir lielisks modernajās pārlūkprogrammās un Node.js).
• Tīrīšana: Ja izmantojat AbortController uz komponentiem balstītā arhitektūrā (piemēram, React, Vue, Angular), nodrošiniet, ka izsaucat controller.abort() tīrīšanas fāzē (piemēram, `componentWillUnmount`, `useEffect` atgrieztā funkcija, `ngOnDestroy`), lai novērstu atmiņas noplūdes un negaidītu uzvedību, kad komponents tiek noņemts no DOM.

Globālā perspektīva: Izstrādājot globālai auditorijai, ņemiet vērā tīkla ātruma un latentuma mainīgumu. Lietotāji reģionos ar sliktāku savienojamību var piedzīvot ilgākus pieprasījumu laikus, padarot efektīvu atcelšanu vēl kritiskāku, lai novērstu ievērojamu viņu pieredzes pasliktināšanos. Ir svarīgi izstrādāt lietojumprogrammu, ņemot vērā šīs atšķirības.

Noslēgums

AbortController un ar to saistītais AbortSignal ir spēcīgi rīki asinhrono operāciju pārvaldībai JavaScript. Nodrošinot standartizētu veidu, kā signalizēt par atcelšanu, tie ļauj izstrādātājiem veidot stabilākas, efektīvākas un lietotājam draudzīgākas lietojumprogrammas. Neatkarīgi no tā, vai strādājat ar vienkāršu fetch pieprasījumu vai orķestrējat sarežģītas darbplūsmas, AbortController izpratne un ieviešana ir fundamentāla prasme jebkuram mūsdienu tīmekļa izstrādātājam.

Pieprasījumu atcelšanas apgūšana ar AbortController ne tikai uzlabo veiktspēju un resursu pārvaldību, bet arī tieši veicina izcilu lietotāja pieredzi. Veidojot interaktīvas lietojumprogrammas, atcerieties integrēt šo būtisko API, lai graciozi apstrādātu gaidošās operācijas, nodrošinot, ka jūsu lietojumprogrammas paliek atsaucīgas un uzticamas visiem lietotājiem visā pasaulē.