JavaScript AbortController: Mestre Avbrudd av Asynkrone Operasjoner

I moderne webutvikling er asynkrone operasjoner allestedsnærværende. Henting av data fra APIer, innstilling av tidtakere og håndtering av brukerinteraksjoner involverer ofte kode som kjører uavhengig og potensielt over lengre tid. Det finnes imidlertid scenarier der du trenger å avbryte disse operasjonene før de er fullført. Det er her AbortController-grensesnittet i JavaScript kommer til unnsetning. Det gir en ren og effektiv måte å signalisere kanselleringsforespørsler til DOM-operasjoner og andre asynkrone oppgaver.

Forstå Behovet for Kansellering

Før vi dykker ned i de tekniske detaljene, la oss forstå hvorfor det er viktig å kansellere asynkrone operasjoner. Vurder disse vanlige scenariene:

Brukernavigasjon: En bruker initierer en søkeforespørsel, og utløser en API-forespørsel. Hvis de raskt navigerer til en annen side før forespørselen er fullført, blir den opprinnelige forespørselen irrelevant og bør kanselleres for å unngå unødvendig nettverkstrafikk og potensielle bivirkninger.
Tidsavbruddshåndtering: Du setter et tidsavbrudd for en asynkron operasjon. Hvis operasjonen fullføres før tidsavbruddet utløper, bør du avbryte tidsavbruddet for å unngå redundant kodeutførelse.
Komponentavmontering: I front-end rammeverk som React eller Vue.js, gjør komponenter ofte asynkrone forespørsler. Når en komponent avmonteres, bør alle pågående forespørsler knyttet til den komponenten kanselleres for å unngå minnelekkasjer og feil forårsaket av oppdatering av avmonterte komponenter.
Ressursbegrensninger: I ressursbegrensede miljøer (f.eks. mobile enheter, innebygde systemer) kan kansellering av unødvendige operasjoner frigjøre verdifulle ressurser og forbedre ytelsen. For eksempel, kansellere en stor bildenedlasting hvis brukeren ruller forbi den delen av siden.

Introduserer AbortController og AbortSignal

AbortController-grensesnittet er utviklet for å løse problemet med å kansellere asynkrone operasjoner. Det består av to nøkkelkomponenter:

AbortController: Dette objektet administrerer kanselleringssignalet. Det har en enkelt metode, abort(), som brukes til å signalisere en kanselleringsforespørsel.
AbortSignal: Dette objektet representerer signalet om at en operasjon skal avbrytes. Det er knyttet til en AbortController og sendes til den asynkrone operasjonen som må kunne kanselleres.

Grunnleggende Bruk: Kansellere Fetch-forespørsler

La oss starte med et enkelt eksempel på å kansellere en fetch-forespørsel:


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

// For å kansellere fetch-forespørselen:
controller.abort();

Forklaring:

Vi oppretter en AbortController-instans.
Vi henter den tilknyttede AbortSignal fra controller.
Vi sender signal til fetch-alternativene.
Hvis vi trenger å kansellere forespørselen, kaller vi controller.abort().
I .catch()-blokken sjekker vi om feilen er en AbortError. Hvis det er det, vet vi at forespørselen ble kansellert.

Håndtere AbortError

Når controller.abort() kalles, vil fetch-forespørselen bli avvist med en AbortError. Det er viktig å håndtere denne feilen på riktig måte i koden din. Unnlatelse av å gjøre det kan føre til uhåndterte promise-avvisninger og uventet oppførsel.

Her er et mer robust eksempel med feilhåndtering:


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; // Eller kast feilen for å bli håndtert lenger opp
    } else {
      console.error('Fetch error:', error);
      throw error; // Kast feilen på nytt for å bli håndtert lenger opp
    }
  }
}

fetchData();

// For å kansellere fetch-forespørselen:
controller.abort();

Beste Praksis for Håndtering av AbortError:

Sjekk feilnavnet: Sjekk alltid om error.name === 'AbortError' for å sikre at du håndterer riktig feiltype.
Returner en standardverdi eller kast på nytt: Avhengig av applikasjonens logikk, kan det være lurt å returnere en standardverdi (f.eks. null) eller kaste feilen på nytt for å bli håndtert lenger opp i kallstakken.
Rydd opp i ressurser: Hvis den asynkrone operasjonen tildelte ressurser (f.eks. tidtakere, hendelseslyttere), rydd dem opp i AbortError-behandleren.

Kansellere Tidtakere med AbortSignal

AbortSignal kan også brukes til å kansellere tidtakere opprettet med setTimeout eller setInterval. Dette krever litt mer manuelt arbeid, siden de innebygde timerfunksjonene ikke støtter AbortSignal direkte. Du må opprette en tilpasset funksjon som lytter etter avbrytelsessignalet og fjerner tidtakeren når den utløses.


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

// For å kansellere tidsavbruddet:
controller.abort();

Forklaring:

cancellableTimeout-funksjonen tar en callback, en forsinkelse og en AbortSignal som argumenter.
Den setter opp en setTimeout og lagrer tidsavbrudds-IDen.
Den legger til en hendelseslytter til AbortSignal som lytter etter abort-hendelsen.
Når abort-hendelsen utløses, fjerner hendelseslytteren tidsavbruddet og avviser promise.

Kansellere Hendelseslyttere

På samme måte som tidtakere, kan du bruke AbortSignal til å kansellere hendelseslyttere. Dette er spesielt nyttig når du vil fjerne hendelseslyttere knyttet til en komponent som blir avmontert.


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

const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log('Button clicked!');
}, { signal });

// For å kansellere hendelseslytteren:
controller.abort();

Forklaring:

Vi sender signal som et alternativ til addEventListener-metoden.
Når controller.abort() kalles, vil hendelseslytteren automatisk bli fjernet.

AbortController i React-komponenter

I React kan du bruke AbortController til å kansellere asynkrone operasjoner når en komponent avmonteres. Dette er viktig for å forhindre minnelekkasjer og feil forårsaket av oppdatering av avmonterte komponenter. Her er et eksempel ved hjelp av useEffect-hooken:


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(); // Kanseller fetch-forespørselen når komponenten avmonteres
    };
  }, []); // Tom avhengighetsarray sikrer at denne effekten bare kjøres én gang ved montering

  return (
    
      {data ? (
        Data: {JSON.stringify(data)}
      ) : (
        Loading...
      )}
    
  );
}

export default MyComponent;

Forklaring:

Vi oppretter en AbortController i useEffect-hooken.
Vi sender signal til fetch-forespørselen.
Vi returnerer en oppryddingsfunksjon fra useEffect-hooken. Denne funksjonen vil bli kalt når komponenten avmonteres.
Inne i oppryddingsfunksjonen kaller vi controller.abort() for å kansellere fetch-forespørselen.

Avanserte Brukstilfeller

Kjede Sammen AbortSignals

Noen ganger kan det være lurt å kjede sammen flere AbortSignals. For eksempel kan du ha en overordnet komponent som trenger å kansellere operasjoner i sine underkomponenter. Du kan oppnå dette ved å opprette en ny AbortController og sende signalet til både den overordnede og underordnede komponenten.

Bruke AbortController med Tredjepartsbiblioteker

Hvis du bruker et tredjepartsbibliotek som ikke støtter AbortSignal direkte, må du kanskje tilpasse koden din til å fungere med bibliotekets kanselleringsmekanisme. Dette kan innebære å pakke bibliotekets asynkrone funksjoner inn i dine egne funksjoner som håndterer AbortSignal.

Fordeler med Å Bruke AbortController

Forbedret Ytelse: Kansellering av unødvendige operasjoner kan redusere nettverkstrafikk, CPU-bruk og minneforbruk, noe som fører til forbedret ytelse, spesielt på ressursbegrensede enheter.
Renere Kode: AbortController gir en standardisert og elegant måte å håndtere kansellering på, noe som gjør koden din mer lesbar og vedlikeholdbar.
Forebygging av Minnelekkasjer: Kansellering av asynkrone operasjoner knyttet til avmonterte komponenter forhindrer minnelekkasjer og feil forårsaket av oppdatering av avmonterte komponenter.
Bedre Brukeropplevelse: Kansellering av irrelevante forespørsler kan forbedre brukeropplevelsen ved å forhindre at utdatert informasjon vises og redusere oppfattet latens.

Nettleserkompatibilitet

AbortController er bredt støttet i moderne nettlesere, inkludert Chrome, Firefox, Safari og Edge. Du kan sjekke kompatibilitetstabellen på MDN Web Docs for den nyeste informasjonen.

Polyfills

For eldre nettlesere som ikke støtter AbortController nativt, kan du bruke en polyfill. En polyfill er en kodebit som gir funksjonaliteten til en nyere funksjon i eldre nettlesere. Det finnes flere AbortController-polyfills tilgjengelig på nettet.

Konklusjon

AbortController-grensesnittet er et kraftig verktøy for å administrere asynkrone operasjoner i JavaScript. Ved å bruke AbortController kan du skrive renere, mer effektiv og mer robust kode som håndterer kansellering på en elegant måte. Enten du henter data fra APIer, setter tidtakere eller administrerer hendelseslyttere, kan AbortController hjelpe deg med å forbedre den generelle kvaliteten på webapplikasjonene dine.

MLOG

JavaScript AbortController: Mestre Avbrudd av Asynkrone Operasjoner

Forstå Behovet for Kansellering

Introduserer AbortController og AbortSignal

Grunnleggende Bruk: Kansellere Fetch-forespørsler

Håndtere AbortError

Kansellere Tidtakere med AbortSignal

Kansellere Hendelseslyttere

AbortController i React-komponenter

Avanserte Brukstilfeller

Kjede Sammen AbortSignals

Bruke AbortController med Tredjepartsbiblioteker

Fordeler med Å Bruke AbortController

Nettleserkompatibilitet

Polyfills

Konklusjon

Videre Lesning