HTTP-Statusmeldungen

Jedes Mal, wenn ein Browser eine Seite lädt, ein Formular abschickt oder Ihr JavaScript einen fetch()-Aufruf macht, antwortet der Server mit einem dreistelligen HTTP-Statuscode. Dieser Code teilt dem Client mit, ob die Anfrage erfolgreich war, umgeleitet wurde, aufgrund eines Clientfehlers fehlgeschlagen ist oder auf der Serverseite fehlgeschlagen ist. Der Browser verwendet ihn automatisch — er folgt Weiterleitungen, zeigt bei bestimmten Codes eine eigene Fehlerseite an und verwendet bei anderen gecachte Inhalte wieder — aber als Entwickler lesen Sie diese Codes auch direkt: Ein Formular wird abgeschickt und Sie verzweigen auf die Antwort, oder ein fetch() wird aufgelöst und Sie prüfen response.ok (was einfach „Status im Bereich 200–299" bedeutet).

Hier finden Sie die Liste der Hypertext Transfer Protocol (HTTP)-Antwortstatuscodes. Diese Codes beantworten die Anfrage, die ein Client an einen Server stellt — unabhängig davon, ob diese Anfrage GET, POST oder eine andere HTTP-Methode verwendet — und sie werden anhand ihrer ersten Ziffer in 5 Klassen eingeteilt. Wenn Sie sie kennen, können Sie fehlerhafte Links, falsche URLs, fehlgeschlagene Formularübermittlungen und unerwartete API-Antworten besser debuggen. Gehen wir jede Klasse durch:

Statusmeldungen in JavaScript verarbeiten

Wenn Sie ein Formular absenden oder eine API mit fetch() aufrufen, gelingt die Anfrage (das Promise wird aufgelöst), auch wenn der Server einen 4xx- oder 5xx-Fehler zurückgibt — eine 404 oder 500 ist immer noch eine gültige HTTP-Antwort, kein Netzwerkfehler. Daher müssen Sie den Status selbst prüfen. Die praktische Abkürzung ist response.ok, die nur für den Bereich 200–299 true ist; für alles andere verzweigen Sie auf response.status, um angemessen zu reagieren:

const form = document.querySelector("#signup");

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  const response = await fetch("/api/signup", {
    method: "POST",
    body: new FormData(form),
  });

  if (response.ok) {
    // 200–299: success
    window.location.href = "/welcome";
  } else if (response.status === 401) {
    showMessage("Please log in first.");
  } else if (response.status === 422) {
    // Validation errors returned as JSON
    const data = await response.json();
    showMessage(data.error);
  } else if (response.status === 429) {
    // Rate limited — respect the Retry-After header
    const wait = response.headers.get("Retry-After");
    showMessage(`Too many attempts. Try again in ${wait}s.`);
  } else if (response.status >= 500) {
    showMessage("Server error — please try again later.");
  } else {
    showMessage(`Unexpected error (${response.status}).`);
  }
});

Beachten Sie, dass fetch() nur bei echten Netzwerkproblemen (keine Verbindung, CORS-Blockierung, DNS-Fehler) zurückgewiesen wird. Das Einschließen des Aufrufs in try…catch behandelt diese Fälle, während das obige if/else den HTTP-Status selbst behandelt.

1xx: Information

2xx: Erfolgreich

3xx: Weiterleitung

Hier nicht aufgeführte Codes (z. B. 305 und 306) sind veraltet, selten oder erweiterungsspezifisch.

4xx: Client-Fehler

Hier nicht aufgeführte Codes (z. B. 419, 420 und einige im Bereich 423–431) sind selten, framework-spezifisch oder nicht standardisiert. Einige — wie 421 (Misdirected Request, verwendet in HTTP/2) und 451 oben — sind standardisiert, aber im Alltag ungewöhnlich.

5xx: Server-Fehler

Verwandte Kapitel

Der vom Server zurückgegebene Status hängt oft von der Anfrage selbst ab. Für weitere Informationen siehe:

• HTTP-Methoden — GET, POST und weitere, die bestimmen, wie sich einige Weiterleitungen (302 vs. 307) verhalten.
• HTML-Formulare — wie Formularübermittlungen Anfragen auslösen, die 303, 422 oder 429 zurückgeben können.
• HTML URL (Uniform Resource Locators) — die Adressen, auf die 3xx-Weiterleitungen und 404-Antworten verweisen.

Übungen