JavaScript Academy · Lektion

Anfragen mit AbortController abbrechen

Brechen Sie laufende Anfragen sauber ab.

Anfragen mit AbortController abbrechen ist eine kostenlose JavaScript 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 JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum eine Anfrage abgebrochen wird

Manchmal starten Sie eine Anfrage, die Sie nicht mehr benötigen: Der Benutzer navigiert weg, gibt eine neue Suche ein oder ein Timeout läuft ab. Mit AbortController können Sie einen laufenden Fetch abbrechen.

Einen Controller erstellen

Erstellen Sie einen AbortController. Er stellt ein signal bereit, das Sie an fetch übergeben, sowie eine abort()-Methode zum Abbrechen.

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

Das Signal übergeben

Übergeben Sie das Signal des Controllers über das Optionsobjekt an fetch. Die Anfrage kann nun abgebrochen werden.

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

abort aufrufen

Rufen Sie controller.abort() zum Abbrechen auf. Das ausstehende Fetch-Promise wird mit einem AbortError abgelehnt.

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

AbortError abfangen

Unterscheiden Sie einen absichtlichen Abbruch von einem echten Fehler, indem Sie in Ihrem catch err.name === "AbortError" prüfen.

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

Muster für Timeouts

Kombinieren Sie dies mit setTimeout, um langsame Anfragen automatisch abzubrechen. Löschen Sie den Timer, wenn die Anfrage zuerst abgeschlossen wird.

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

Integrierte Timeout-Hilfsfunktion

Moderne Umgebungen bieten AbortSignal.timeout(ms), das ein Signal zurückgibt, welches automatisch abbricht. Das ist übersichtlicher, als setTimeout selbst zu verdrahten.

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

Vorherige Suche abbrechen

Brechen Sie bei einer Suche während der Eingabe die vorherige Anfrage ab, bevor Sie eine neue starten. Dadurch wird verhindert, dass veraltete Antworten aktuelle Ergebnisse überschreiben.

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

Ein Signal, mehrere Fetches

Ein einzelnes Signal kann mehrere Anfragen gleichzeitig abbrechen. Übergeben Sie dasselbe Signal an mehrere Fetches; ein Aufruf von abort() bricht sie alle ab.

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

Bereits abgebrochene Signale

Wenn ein Signal beim Übergeben an fetch bereits abgebrochen wurde, wird die Anfrage sofort abgelehnt. Prüfen Sie signal.aborted, wenn Sie seinen Status kennen müssen.

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

Beim Unmount aufräumen

Brechen Sie in komponentenbasierten UIs ausstehende Anfragen ab, wenn die Komponente zerstört wird, damit kein Status für etwas gesetzt wird, das nicht mehr existiert.

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

Kurzer Test

Fetch-Anfragen abbrechen.

Zusammenfassung

Erstellen Sie einen AbortController, übergeben Sie sein signal an fetch und rufen Sie zum Abbrechen abort() auf. Das Promise wird mit einem AbortError abgelehnt, den Sie anhand seines Namens erkennen können. Verwenden Sie dies für Timeouts (AbortSignal.timeout), zum Abbrechen vorheriger Suchanfragen, zum Abbrechen mehrerer Anfragen und zum Aufräumen beim Abbau.

Häufig gestellte Fragen

Ist die Lektion „Anfragen mit AbortController abbrechen“ kostenlos?

Ja — der vollständige Text von „Anfragen mit AbortController abbrechen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Anfragen mit AbortController abbrechen“?

Brechen Sie laufende Anfragen sauber ab. Du übst JavaScript 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 JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript 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 „Anfragen mit AbortController abbrechen“?

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 JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript 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

← Zurück zu JavaScript Academy