fetch() abbrechen und mit Timeout absichern – AbortController
Ein fetch(), das ewig lädt, oder eine veraltete Suchanfrage – mit AbortController brichst du laufende Requests sauber ab und gibst ihnen ein Zeitlimit.
fetch() läuft von sich aus unbegrenzt weiter – hängt der Server, hängt deine Anfrage. Und tippt jemand im Suchfeld weiter, willst du die alte, schon veraltete Anfrage abbrechen. Beides löst der AbortController.
fetch mit Timeout
Am einfachsten geht das über AbortSignal.timeout():
try {
const res = await fetch('/api/daten', {
signal: AbortSignal.timeout(5000), // nach 5 s abbrechen
});
const daten = await res.json();
} catch (err) {
if (err.name === 'TimeoutError') console.warn('Zeitüberschreitung');
else if (err.name === 'AbortError') console.warn('Abgebrochen');
else throw err;
}Veraltete Anfragen abbrechen (Live-Suche)
Bei jeder neuen Eingabe brichst du den vorigen Request ab, damit dir kein altes Ergebnis dazwischenfunkt:
let controller;
async function suche(q) {
controller?.abort(); // vorherige Anfrage stoppen
controller = new AbortController();
try {
const res = await fetch(`/api/suche?q=${encodeURIComponent(q)}`, {
signal: controller.signal,
});
return await res.json();
} catch (err) {
if (err.name === 'AbortError') return null; // gewollt abgebrochen
throw err;
}
}Wichtig ist, den AbortError gezielt abzufangen – ein Abbruch ist ja kein echter Fehler, sondern genau das gewünschte Verhalten. Alle anderen Fehler reichst du normal weiter.
Solche Details entscheiden, ob sich eine Oberfläche schnell und robust anfühlt. Wenn du so eine Website brauchst, melde dich über bymw.de.
Quellen
Du brauchst mehr als ein Snippet?
Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.
Projekt anfragen →Verwandte Snippets
Formulare ohne Neuladen abschicken – FormData und fetch
Ein Formular per JavaScript abzuschicken heißt nicht, jedes Feld einzeln auszulesen. FormData nimmt das ganze Formular, fetch schickt es weg – inklusive Dateien, und mit einer Fehlermeldung, die der Besucher versteht.
Promise.allSettled – wenn ein einziger Fehlschlag nicht alles kippen darf
Promise.all bricht beim ersten Fehler ab und wirft alle anderen Ergebnisse weg. Für ein Dashboard aus fünf Quellen ist das genau falsch: Vier Kacheln könnten Daten zeigen, aber die Seite bleibt leer.
Web Worker – rechnen, ohne die Oberfläche einzufrieren
JavaScript hat im Browser genau einen Faden für alles: Klicks, Animationen, Layout – und deine Rechenschleife. Dauert die zwei Sekunden, ist die Seite zwei Sekunden lang tot. Ein Worker nimmt die Arbeit auf einen eigenen Faden.