JavaScript Academy · Lektion

Avbryta begäranden med AbortController

Avbryt pågående begäranden på ett ordnat sätt.

Lektion 4 av 413 steg

Avbryta begäranden med AbortController är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Varför avbryta en begäran

Ibland startas en begäran som inte längre behövs: användaren navigerar bort, skriver en ny sökning eller så löper en tidsgräns ut. AbortController gör det möjligt att avbryta en pågående fetch.

Skapa en controller

Skapa en AbortController. Den tillhandahåller en signal som skickas till fetch och en abort()-metod för att avbryta.

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

Skicka signalen

Skicka controllerns signal till fetch via options-objektet. Begäran kan nu avbrytas.

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

Anropa abort

Anropa controller.abort() för att avbryta. Den väntande fetch-Promisen avvisas med ett AbortError.

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

Fånga AbortError

Skilj ett avsiktligt avbrott från ett verkligt fel genom att kontrollera err.name === "AbortError" i din catch-sats.

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

Mönster för tidsgräns

Kombinera med setTimeout för att automatiskt avbryta långsamma begäranden. Rensa timern om begäran slutförs först.

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

Inbyggd hjälpfunktion för tidsgräns

Moderna miljöer erbjuder AbortSignal.timeout(ms), som returnerar en signal som avbryts automatiskt. Det är enklare än att koppla in setTimeout själv.

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

Avbryt föregående sökning

Vid sökning medan användaren skriver avbryter du den föregående begäran innan en ny startas. Då kan gamla svar inte skriva över de nya resultaten.

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

En signal, många fetch-anrop

En enda signal kan avbryta flera begäranden samtidigt. Skicka samma signal till flera fetch-anrop så avbryter ett abort() dem alla.

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

Redan avbrutna signaler

Om en signal redan är avbruten när den skickas till fetch avvisas begäran omedelbart. Kontrollera signal.aborted om signalens tillstånd behöver kontrolleras.

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

Rensa vid avmontering

I komponentbaserade gränssnitt avbryter du utestående begäranden när komponenten förstörs, så att tillstånd inte sätts på något som inte längre finns.

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

Snabbkontroll

Avbryta fetch-begäranden.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Skapa en AbortController, skicka dess signal till fetch och anropa abort() för att avbryta. Promisen avvisas med ett AbortError som kan identifieras med namnet. Använd detta för tidsgränser (AbortSignal.timeout), för att avbryta föregående sökning, för att avbryta flera begäranden och för rensning vid nedmontering.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Avbryta begäranden med AbortController” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Avbryta begäranden med AbortController”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Avbryta begäranden med AbortController”?

Avbryt pågående begäranden på ett ordnat sätt. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Avbryta begäranden med AbortController”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy