fetch() abbrechen und mit Timeout absichern – AbortController

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

• AbortController – MDN Web Docs
• AbortSignal: timeout() – MDN Web Docs