AbortController för städning
Skapa en AbortController, skicka dess signal till fetch och avbryt pågående anrop i cleanup-funktionen för att förhindra state-uppdateringar i avmonterade komponenter.
AbortController för städning är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Varför avbryta fetch-förfrågningar?
När en komponent avmonteras eller hämtar data på nytt kan den tidigare förfrågan fortfarande pågå. Om den slutförs efter den nya förfrågan skriver föråldrade data över färska data. AbortController avbryter pågående förfrågningar på ett tillförlitligt sätt.
Grunderna i AbortController
Skapa en AbortController, skicka dess signal till fetch och anropa controller.abort() för att avbryta. Fetch kastar ett AbortError när den avbryts.
const controller = new AbortController();
try {
const res = await fetch('/api/data', { signal: controller.signal });
const data = await res.json();
setData(data);
} catch (err) {
if (err instanceof DOMException && err.name === 'AbortError') {
console.log('Request was cancelled');
} else {
setError((err as Error).message);
}
}
// To cancel:
controller.abort();I useEffect-städningen
Skapa en AbortController i början av effekten och anropa abort() i städfunktionen. Då avbryts förfrågan automatiskt när beroenden ändras eller komponenten avmonteras.
useEffect(() => {
const controller = new AbortController();
async function load() {
try {
const res = await fetch(`/api/user/${userId}`, { signal: controller.signal });
if (!res.ok) throw new Error(`${res.status}`);
setUser(await res.json());
} catch (err) {
if ((err as DOMException).name !== 'AbortError') {
setError((err as Error).message);
}
}
}
load();
return () => controller.abort();
}, [userId]);AbortError jämfört med nätverksfel
En avbruten förfrågan kastar en DOMException med namnet 'AbortError'. Kontrollera alltid detta specifikt och visa det inte som ett synligt fel för användaren – det är förväntad städning.
Egenskapen signal.aborted
Kontrollera controller.signal.aborted för att testa om en signal har avbrutits. Det är användbart för att kontrollera detta innan ett setState-anrop i asynkron kod.
const data = await fetchData();
if (!controller.signal.aborted) {
setData(data); // safe to update state
}Avbryta flera förfrågningar
En AbortController kan avbryta flera fetch-förfrågningar genom att samma signal skickas med till dem alla.
const controller = new AbortController();
const { signal } = controller;
await Promise.all([
fetch('/api/users', { signal }),
fetch('/api/products', { signal }),
fetch('/api/settings', { signal }),
]);
controller.abort(); // cancels all threeAbortController med Axios
Axios stöder AbortControllers signal via alternativet signal i konfigurationen. Signalgränssnittet är detsamma som i fetch.
const controller = new AbortController();
await axios.get('/api/data', { signal: controller.signal });
// In cleanup:
return () => controller.abort();React Query hanterar detta automatiskt
När du använder TanStack Query (React Query) hanteras avbrytning åt dig. React Query skapar och avbryter controllers internt. Det är en av anledningarna till att föredra det framför manuella fetch-mönster.
Timeout med AbortController
Kombinera AbortController med setTimeout för att implementera tidsgränser för förfrågningar.
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout
try {
const data = await fetch(url, { signal: controller.signal });
// ...
} finally {
clearTimeout(timeoutId);
}AbortSignal.timeout() – modern genväg
I moderna webbläsare skapar AbortSignal.timeout(ms) en signal som automatiskt avbryts efter den angivna tiden utan att en manuell controller behövs.
const res = await fetch('/api/data', {
signal: AbortSignal.timeout(5000) // 5 second timeout
});Städning är avgörande i React 18 Strict Mode
React 18 Strict Mode monterar effekter två gånger i utvecklingsläge. Utan städning med AbortController får du dubbla datahämtningar och eventuella varningar om state på avmonterade komponenter. Städmönstret förhindrar båda problemen.
Snabbkontroll
Hur förhindrar du att ett föråldrat nätverkssvar uppdaterar state efter att en komponent renderas om?
Sammanfattning: AbortController
Skapa en AbortController per effekt. Skicka signalen till fetch/axios. Avbryt i städfunktionen. Ignorera AbortError – det är förväntat. Använd signal.aborted före setState i asynkron kod. En controller kan avbryta många förfrågningar. Använd AbortSignal.timeout() för tidsgränser. React Query hanterar allt detta automatiskt.
Lär dig HTML 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
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”AbortController för städning” gratis?
Ja – hela texten till ”AbortController för städning” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”AbortController för städning”?
Skapa en AbortController, skicka dess signal till fetch och avbryt pågående anrop i cleanup-funktionen för att förhindra state-uppdateringar i avmonterade komponenter. Ni övar på Frontend 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 Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend 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 ”AbortController för städning”?
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 Frontend Academy-lektionen?
Ja. Varje Frontend 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
- Grunderna i useEffect: beroenden och städning
- Hämta data vid montering
- Hantera loading- och error-tillstånd
- AbortController för städning