AbortController zur Bereinigung
Erstellen Sie einen AbortController, übergeben Sie dessen Signal an fetch und brechen Sie laufende Anfragen in der Cleanup-Funktion ab, um State-Updates bei ausgehängten Komponenten zu verhindern.
AbortController zur Bereinigung ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum sollten Sie Fetch-Anfragen abbrechen?
Wenn eine Komponente unmountet oder erneut Daten abruft, kann die vorherige Anfrage noch laufen. Wird sie nach der neuen Anfrage abgeschlossen, überschreiben veraltete Daten die aktuellen. AbortController bricht laufende Anfragen sauber ab.
Grundlagen von AbortController
Erstellen Sie einen AbortController, übergeben Sie sein signal an fetch und rufen Sie controller.abort() auf, um die Anfrage abzubrechen. Fetch löst beim Abbruch einen AbortError aus.
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();In der Cleanup-Funktion von useEffect
Erstellen Sie am Anfang des Effects einen AbortController und rufen Sie abort() in der Cleanup-Funktion auf. Dadurch wird die Anfrage automatisch abgebrochen, wenn sich Dependencies ändern oder die Komponente unmountet.
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 vs. Netzwerkfehler
Eine abgebrochene Anfrage löst eine DOMException mit dem Namen 'AbortError' aus. Prüfen Sie diesen Fall immer ausdrücklich und zeigen Sie ihn nicht als für Benutzer sichtbaren Fehler an – eine solche Bereinigung ist zu erwarten.
Die Eigenschaft signal.aborted
Prüfen Sie controller.signal.aborted, um festzustellen, ob ein Signal abgebrochen wurde. Das ist nützlich, um dies vor einem setState-Aufruf in asynchronem Code zu prüfen.
const data = await fetchData();
if (!controller.signal.aborted) {
setData(data); // safe to update state
}Mehrere Anfragen abbrechen
Ein AbortController kann mehrere Fetch-Anfragen abbrechen, indem Sie dasselbe Signal an alle Anfragen übergeben.
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 mit Axios
Axios unterstützt das Signal von AbortController über die Option signal in der Konfiguration. Die Signal-Schnittstelle ist dieselbe wie bei fetch.
const controller = new AbortController();
await axios.get('/api/data', { signal: controller.signal });
// In cleanup:
return () => controller.abort();React Query erledigt das automatisch
Bei der Verwendung von TanStack Query (React Query) wird die Abbruchlogik für Sie übernommen. React Query erstellt und beendet Controller intern. Das ist einer der Gründe, warum Sie es manuellen Fetch-Mustern vorziehen sollten.
Timeouts mit AbortController
Kombinieren Sie AbortController mit setTimeout, um Zeitlimits für Anfragen zu implementieren.
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() – moderne Kurzform
In modernen Browsern erstellt AbortSignal.timeout(ms) ein Signal, das nach der angegebenen Dauer automatisch abgebrochen wird, ohne dass ein manueller Controller erforderlich ist.
const res = await fetch('/api/data', {
signal: AbortSignal.timeout(5000) // 5 second timeout
});Bereinigung ist im React-18-Strict-Mode entscheidend
Der Strict Mode von React 18 mountet Effects in der Entwicklung zweimal. Ohne die Bereinigung mit AbortController sehen Sie doppelte Fetch-Anfragen und möglicherweise Warnungen wegen State-Aktualisierungen nach dem Unmounten einer Komponente. Das Bereinigungsmuster verhindert beides.
Kurztest
Wie verhindern Sie, dass eine veraltete Netzwerkantwort den State aktualisiert, nachdem eine Komponente erneut gerendert wurde?
Zusammenfassung: AbortController
Erstellen Sie pro Effect einen AbortController. Übergeben Sie das Signal an fetch oder axios. Brechen Sie die Anfrage in der Cleanup-Funktion ab. Ignorieren Sie AbortError – er ist zu erwarten. Prüfen Sie signal.aborted vor setState in asynchronem Code. Ein Controller kann viele Anfragen abbrechen. Verwenden Sie AbortSignal.timeout() für Zeitlimits. React Query erledigt all dies automatisch.
Häufig gestellte Fragen
Ist die Lektion „AbortController zur Bereinigung“ kostenlos?
Ja — der vollständige Text von „AbortController zur Bereinigung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „AbortController zur Bereinigung“?
Erstellen Sie einen AbortController, übergeben Sie dessen Signal an fetch und brechen Sie laufende Anfragen in der Cleanup-Funktion ab, um State-Updates bei ausgehängten Komponenten zu verhindern. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „AbortController zur Bereinigung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- useEffect-Grundlagen: Abhängigkeiten und Bereinigung
- Daten beim Mounten abrufen
- Loading- und Error-States behandeln
- AbortController zur Bereinigung