JavaScript AbortController: Asünkroonsete operatsioonide tühistamise meisterlik valdamine

Kaasaegses veebiarenduses on asünkroonsed operatsioonid kõikjal levinud. Andmete toomine API-dest, taimerite seadistamine ja kasutaja interaktsioonide käsitlemine hõlmavad sageli koodi, mis töötab iseseisvalt ja potentsiaalselt pikema aja jooksul. Siiski on stsenaariume, kus peate need operatsioonid enne nende lõpuleviimist tühistama. Siin tuleb appi JavaScripti AbortController liides. See pakub puhast ja tõhusat viisi tühistamistaotluste signaalimiseks DOM-operatsioonidele ja teistele asünkroonsetele ülesannetele.

Vajadus tühistamise järele

Enne tehnilistesse detailidesse sukeldumist mõistame, miks asünkroonsete operatsioonide tühistamine on oluline. Mõelge nendele tavalistele stsenaariumidele:

• Kasutaja navigeerimine: Kasutaja algatab otsingupäringu, mis käivitab API päringu. Kui ta navigeerib kiiresti teisele lehele enne päringu lõpulejõudmist, muutub algne päring ebaoluliseks ja tuleks tühistada, et vältida tarbetut võrguliiklust ja võimalikke kõrvalmõjusid.
• Ajalimi haldamine: Määrad asünkroonsele operatsioonile ajalimi. Kui operatsioon lõpeb enne ajalimi möödumist, peaksite ajalimi tühistama, et vältida üleliigset koodi käivitamist.
• Komponendi eemaldamine (unmount): Esiotsa raamistikes nagu React või Vue.js teevad komponendid sageli asünkroonseid päringuid. Kui komponent eemaldatakse, tuleks kõik selle komponendiga seotud käimasolevad päringud tühistada, et vältida mälulekkeid ja vigu, mis on põhjustatud eemaldatud komponentide uuendamisest.
• Ressursipiirangud: Piiratud ressurssidega keskkondades (nt mobiilseadmed, manussüsteemid) võib tarbetute operatsioonide tühistamine vabastada väärtuslikke ressursse ja parandada jõudlust. Näiteks suure pildi allalaadimise tühistamine, kui kasutaja kerib lehe sellest osast mööda.

AbortControlleri ja AbortSignali tutvustus

Liides AbortController on loodud asünkroonsete operatsioonide tühistamise probleemi lahendamiseks. See koosneb kahest põhikomponendist:

• AbortController: See objekt haldab tühistamissignaali. Sellel on üks meetod, abort(), mida kasutatakse tühistamistaotluse saatmiseks.
• AbortSignal: See objekt esindab signaali, et operatsioon tuleks katkestada. See on seotud AbortControlleriga ja edastatakse asünkroonsele operatsioonile, mis peab olema tühistatav.

Põhikasutus: Fetch-päringute tühistamine

Alustame lihtsa näitega fetch-päringu tühistamisest:

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();

Selgitus:

1. Loome AbortControlleri instantsi.
2. Saame controllerilt seotud AbortSignali.
3. Edastame signali fetchi valikutele.
4. Kui meil on vaja päring tühistada, kutsume välja controller.abort().
5. .catch() plokis kontrollime, kas viga on AbortError. Kui on, siis teame, et päring tühistati.

AbortErrori käsitlemine

Kui controller.abort() välja kutsutakse, lükatakse fetch-päring tagasi veaga AbortError. On ülioluline seda viga oma koodis asjakohaselt käsitleda. Selle tegemata jätmine võib viia käsitlemata lubaduste tagasilükkamisteni ja ootamatu käitumiseni.

Siin on robustsem näide veakäsitlusega:

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();
    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();

Parimad praktikad AbortErrori käsitlemiseks:

• Kontrollige vea nime: Kontrollige alati, kas error.name === 'AbortError', et veenduda, et käsitlete õiget veatüüpi.
• Tagastage vaikeväärtus või visake viga edasi: Sõltuvalt teie rakenduse loogikast võiksite tagastada vaikeväärtuse (nt null) või visata vea edasi, et seda käsitleda kõrgemal kutsungipinul.
• Puhastage ressursid: Kui asünkroonne operatsioon eraldas ressursse (nt taimerid, sündmuste kuulajad), puhastage need AbortErrori käsitlejas.

Taimerite tühistamine AbortSignaliga

AbortSignali saab kasutada ka setTimeouti või setIntervaliga loodud taimerite tühistamiseks. See nõuab natuke rohkem käsitsi tööd, kuna sisseehitatud taimerifunktsioonid ei toeta otse AbortSignali. Peate looma kohandatud funktsiooni, mis kuulab katkestussignaali ja tühjendab taimeri, kui see käivitatakse.

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();

Selgitus:

1. Funktsioon cancellableTimeout võtab argumentidena tagasikutse, viivituse ja AbortSignali.
2. See seab üles setTimeouti ja salvestab taimeri ID.
3. See lisab AbortSignalile sündmuse kuulaja, mis kuulab abort sündmust.
4. Kui abort sündmus käivitatakse, tühjendab sündmuse kuulaja taimeri ja lükkab lubaduse tagasi.

Sündmuste kuulajate tühistamine

Sarnaselt taimeritele saate kasutada AbortSignali sündmuste kuulajate tühistamiseks. See on eriti kasulik, kui soovite eemaldada sündmuste kuulajad, mis on seotud komponendiga, mida eemaldatakse.

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();

Selgitus:

1. Edastame signali valikuna addEventListener meetodile.
2. Kui controller.abort() välja kutsutakse, eemaldatakse sündmuse kuulaja automaatselt.

AbortController Reacti komponentides

Reactis saate kasutada AbortControllerit asünkroonsete operatsioonide tühistamiseks, kui komponent eemaldatakse. See on oluline mälulekete ja vigade vältimiseks, mis on põhjustatud eemaldatud komponentide uuendamisest. Siin on näide, kasutades useEffect konksu:

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;

Selgitus:

1. Loome AbortControlleri useEffect konksu sees.
2. Edastame signali fetch-päringule.
3. Tagastame useEffect konksust puhastusfunktsiooni. See funktsioon kutsutakse välja, kui komponent eemaldatakse.
4. Puhastusfunktsiooni sees kutsume välja controller.abort(), et tühistada fetch-päring.

Täpsemad kasutusjuhud

AbortSignalite aheldamine

Mõnikord võite soovida aheldada mitu AbortSignali kokku. Näiteks võib teil olla vanemkomponent, mis peab tühistama operatsioone oma alamkomponentides. Saate seda saavutada, luues uue AbortControlleri ja edastades selle signaali nii vanem- kui ka alamkomponentidele.

AbortControlleri kasutamine kolmandate osapoolte teekidega

Kui kasutate kolmanda osapoole teeki, mis ei toeta otse AbortSignali, peate võib-olla kohandama oma koodi, et see töötaks teegi tühistamismehhanismiga. See võib hõlmata teegi asünkroonsete funktsioonide mähkimist oma funktsioonidesse, mis käsitlevad AbortSignali.

AbortControlleri kasutamise eelised

• Parem jõudlus: Tarbetute operatsioonide tühistamine võib vähendada võrguliiklust, protsessori kasutust ja mälutarvet, mis viib parema jõudluseni, eriti piiratud ressurssidega seadmetes.
• Puhtam kood: AbortController pakub standardiseeritud ja elegantset viisi tühistamise haldamiseks, muutes teie koodi loetavamaks ja hooldatavamaks.
• Mälulekete ennetamine: Eemaldatud komponentidega seotud asünkroonsete operatsioonide tühistamine hoiab ära mälulekkeid ja vigu, mis on põhjustatud eemaldatud komponentide uuendamisest.
• Parem kasutajakogemus: Ebaoluliste päringute tühistamine võib parandada kasutajakogemust, vältides vananenud teabe kuvamist ja vähendades tajutavat latentsust.

Brauseri ühilduvus

AbortController on laialdaselt toetatud kaasaegsetes brauserites, sealhulgas Chrome, Firefox, Safari ja Edge. Saate vaadata ühilduvustabelit MDN Web Docs lehelt uusima teabe saamiseks.

Polüfillid

Vanemate brauserite jaoks, mis ei toeta AbortControllerit loomulikult, saate kasutada polüfilli. Polüfill on kooditükk, mis pakub uuema funktsiooni funktsionaalsust vanemates brauserites. Internetis on saadaval mitu AbortControlleri polüfilli.

Kokkuvõte

Liides AbortController on võimas tööriist asünkroonsete operatsioonide haldamiseks JavaScriptis. Kasutades AbortControllerit, saate kirjutada puhtamat, parema jõudlusega ja robustsemat koodi, mis käsitleb tühistamist sujuvalt. Olgu tegemist andmete toomisega API-dest, taimerite seadistamise või sündmuste kuulajate haldamisega, AbortController aitab teil parandada oma veebirakenduste üldist kvaliteeti.

Lisalugemist

• MDN Web Docs: AbortController
• WHATWG DOM Living Standard: AbortController