JavaScript Academy · Lektion

Annullering af forespørgsler med AbortController

Annullér igangværende forespørgsler på en ryddelig måde.

Lektion 4 af 413 trin

Annullering af forespørgsler med AbortController er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvorfor annullere en anmodning

Nogle gange starter du en anmodning, som du ikke længere har brug for: Brugeren navigerer væk, skriver en ny søgning, eller en tidsgrænse udløber. AbortController lader dig annullere et igangværende fetch-kald.

Oprette en controller

Opret en AbortController. Den giver dig et signal, som du sender til fetch, og en abort()-metode til at annullere.

const controller = new AbortController();
console.log(controller.signal); // an AbortSignal

Sende signalet

Giv controllerens signal til fetch via options-objektet. Nu kan anmodningen annulleres.

fetch(url, { signal: controller.signal });

Kalde abort

Kald controller.abort() for at annullere. Det ventende fetch-Promise afvises med en AbortError.

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // cancels the request

Fange AbortError

Skeln mellem en bevidst annullering og en reel fejl ved at kontrollere err.name === "AbortError" i din catch-blok.

try {
  await fetch(url, { signal: controller.signal });
} catch (err) {
  if (err.name === "AbortError") console.log("Cancelled");
  else throw err;
}

Mønster for tidsgrænse

Kombiner med setTimeout for automatisk at annullere langsomme anmodninger. Ryd timeren, hvis anmodningen bliver færdig først.

const c = new AbortController();
const t = setTimeout(() => c.abort(), 5000);
await fetch(url, { signal: c.signal });
clearTimeout(t);

Indbygget hjælpefunktion til tidsgrænser

Moderne miljøer tilbyder AbortSignal.timeout(ms), som returnerer et signal, der automatisk annullerer. Det er enklere end selv at sætte setTimeout op.

fetch(url, { signal: AbortSignal.timeout(5000) });

Annullere den forrige søgning

Ved søgning, mens brugeren skriver, skal du annullere den forrige anmodning, før du starter en ny. Det forhindrer gamle svar i at overskrive nye resultater.

let current = null;
function search(q) {
  if (current) current.abort();
  current = new AbortController();
  return fetch("/search?q=" + q, { signal: current.signal });
}

Ét signal, mange fetch-kald

Ét signal kan annullere flere anmodninger på én gang. Send det samme signal til flere fetch-kald, så annullerer ét abort()-kald dem alle.

const c = new AbortController();
fetch(a, { signal: c.signal });
fetch(b, { signal: c.signal });
c.abort(); // cancels both

Allerede annullerede signaler

Hvis et signal allerede er annulleret, når det sendes til fetch, afvises anmodningen med det samme. Kontrollér signal.aborted, hvis du har brug for at kende dets tilstand.

if (controller.signal.aborted) console.log("already cancelled");

Oprydning ved afmontering

I komponentbaserede brugergrænseflader skal du annullere udestående anmodninger, når komponenten bliver ødelagt, så du undgår at sætte tilstand på noget, der ikke længere findes.

const controller = new AbortController();
// on teardown:
controller.abort();

Hurtigt tjek

Annullere fetch-anmodninger.

Besvar den i den interaktive lektion

Opsummering

Opret en AbortController, send dens signal til fetch, og kald abort() for at annullere. Promise afvises med en AbortError, som du kan registrere via navnet. Brug det til tidsgrænser (AbortSignal.timeout), til at annullere den forrige søgning, til at annullere flere anmodninger og til oprydning ved nedlukning.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Annullering af forespørgsler med AbortController” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Annullering af forespørgsler med AbortController”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Annullering af forespørgsler med AbortController”?

Annullér igangværende forespørgsler på en ryddelig måde. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Annullering af forespørgsler med AbortController”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?

Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Oprettelse af GET-forespørgsler
POST og afsendelse af data
Håndtering af fejl og statuskoder
Annullering af forespørgsler med AbortController

← Tilbage til JavaScript Academy