JavaScript Academy · Lektion

Fehler und Statuscodes behandeln

Prüfen Sie response.ok und behandeln Sie Fehlerfälle.

Fehler und Statuscodes behandeln ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

fetch lehnt bei HTTP-Fehlern nicht ab

Eine überraschende Stolperfalle: fetch lehnt nur bei Netzwerkfehlern ab. Eine 404- oder 500-Antwort wird trotzdem erfolgreich aufgelöst. Sie müssen den Status selbst überprüfen.

response.ok überprüfen

response.ok ist nur bei Statuscodes im Bereich von 200 bis 299 true. Verwenden Sie es, um HTTP-Fehler zu erkennen.

const response = await fetch(url);
if (!response.ok) {
  console.log("HTTP error:", response.status);
}

Statuscode auslesen

response.status liefert den numerischen Code und response.statusText eine kurze Meldung. Verzweigen Sie anhand dieser Werte, um bestimmte Fälle zu behandeln.

if (response.status === 404) console.log("Not found");
if (response.status === 401) console.log("Unauthorized");

Bei fehlerhaftem Status einen Fehler auslösen

Ein klares Muster besteht darin, einen Error auszulösen, wenn die Antwort nicht erfolgreich ist, sodass ein einziges catch sowohl Netzwerk- als auch HTTP-Fehler behandelt.

if (!response.ok) {
  throw new Error("Request failed: " + response.status);
}

In try/catch einschließen

Schließen Sie mit async/await den gesamten Ablauf in try/catch ein. Netzwerkfehler lehnen das Promise ab und landen in catch; das gilt auch für Ihren ausgelösten HTTP-Fehler.

try {
  const res = await fetch(url);
  if (!res.ok) throw new Error("Status " + res.status);
  const data = await res.json();
} catch (err) {
  console.log("Failed:", err.message);
}

Fehlertypen unterscheiden

Ein abgelehntes fetch bedeutet normalerweise, dass der Server nicht erreichbar war, DNS fehlgeschlagen ist oder CORS die Anfrage blockiert hat. Eine nicht erfolgreiche Antwort bedeutet, dass der Server geantwortet hat, allerdings mit einem Fehler. Behandeln Sie diese Fälle unterschiedlich, wenn es darauf ankommt.

Fehlerantworten auslesen

APIs liefern häufig JSON zurück, das den Fehler beschreibt. Lesen Sie es vor dem Auslösen des Fehlers aus, damit Sie eine hilfreiche Meldung anzeigen können.

if (!res.ok) {
  const errBody = await res.json().catch(() => ({}));
  throw new Error(errBody.message || ("Status " + res.status));
}

Häufige Statuscodes

Kennen Sie die Gruppen: 2xx Erfolg, 3xx Weiterleitung, 4xx Clientfehler (Sie haben etwas falsch gesendet), 5xx Serverfehler (der Fehler liegt auf der Serverseite). Fetch folgt den meisten Weiterleitungen automatisch.

Eine wiederverwendbare Hilfsfunktion

Zentralisieren Sie die Prüfung in einer Hilfsfunktion, damit jede Aufrufstelle eine einheitliche Fehlerbehandlung erhält.

async function getJSON(url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error("HTTP " + res.status);
  return res.json();
}

Vorübergehende Fehler wiederholen

Bei instabilen Netzwerken können Sie Anfragen bei 5xx- oder Netzwerkfehlern wiederholen. Halten Sie die Anzahl der Wiederholungen klein und fügen Sie eine Verzögerung hinzu, damit der Server nicht überlastet wird.

for (let i = 0; i < 3; i++) {
  try { return await getJSON(url); }
  catch (e) { if (i === 2) throw e; }
}

Fehler für Benutzer sichtbar machen

Fangen Sie Fehler auf der UI-Ebene ab, um eine verständliche Meldung statt eines leeren Bildschirms anzuzeigen. Lassen Sie niemals zu, dass eine unbehandelte Ablehnung eine fehlgeschlagene Anfrage stillschweigend verschluckt.

getJSON(url)
  .then(render)
  .catch(() => showToast("Could not load data"));

Kurzer Test

Fehlerbehandlung bei Fetch.

Zusammenfassung

Fetch lehnt nur bei Netzwerkfehlern ab. Prüfen Sie daher immer response.ok/response.status und lösen Sie bei fehlerhaften Statuscodes einen Fehler aus. Schließen Sie Aufrufe in try/catch ein, lesen Sie Fehlerantworten für Meldungen aus, zentralisieren Sie die Prüfung in einer Hilfsfunktion und zeigen Sie verständliche Fehler in der UI an.

Häufig gestellte Fragen

Ist die Lektion „Fehler und Statuscodes behandeln“ kostenlos?

Ja — der vollständige Text von „Fehler und Statuscodes behandeln“ 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 „Fehler und Statuscodes behandeln“?

Prüfen Sie response.ok und behandeln Sie Fehlerfälle. 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 3 von 4.

Wie lange dauert die Lektion „Fehler und Statuscodes behandeln“?

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