Die Fetch-API in JavaScript: ein praktischer Leitfaden

Die Fetch-API ist die moderne, auf Promises basierende Art, vom Browser aus HTTP-Anfragen zu stellen. Sie ersetzt das ältere XMLHttpRequest durch eine sauberere Schnittstelle, die natürlich mit async/await und Streams zusammenarbeitet. Jeder aktuelle Browser unterstützt sie.

Eine erste GET-Anfrage

fetch() gibt ein Promise zurück, das zu einem Response-Objekt aufgelöst wird. Um daraus JSON zu lesen, ruft man response.json() auf, was selbst ein Promise zurückgibt:

const res = await fetch('https://api.example.com/articles');
const data = await res.json();
console.log(data);

Dasselbe ohne async/await, mit Ketten aus .then():

fetch('https://api.example.com/articles')
  .then((res) => res.json())
  .then((data) => console.log(data));

Der Haken: fetch lehnt bei HTTP-Fehlern nicht ab

Das bringt fast jeden ins Stolpern. Eine 404- oder 500-Antwort ist immer noch ein erfolgreicher Fetch — das Promise wird nur bei einem Netzwerkfehler abgelehnt (offline, DNS, CORS). Sie müssen response.ok selbst prüfen:

const res = await fetch(url);
if (!res.ok) {
  throw new Error(`HTTP ${res.status} ${res.statusText}`);
}
const data = await res.json();

Daten mit POST senden

Übergeben Sie ein zweites Optionsargument, um Methode, Header und Body festzulegen. Für JSON serialisieren Sie die Nutzlast und setzen den Content-Type:

const res = await fetch('/api/articles', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'Hallo', body: 'Welt' }),
});
const created = await res.json();

Eine Anfrage abbrechen

Verwenden Sie einen AbortController, um eine Anfrage abzubrechen — nützlich für Zeitlimits oder wenn eine Komponente entfernt wird:

const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 5000);

try {
  const res = await fetch(url, { signal: controller.signal });
  const data = await res.json();
} catch (err) {
  if (err.name === 'AbortError') console.log('Anfrage abgelaufen');
} finally {
  clearTimeout(timeout);
}

Schnellreferenz

Aufgabe	Wie
JSON lesen	await res.json()
Text lesen	await res.text()
Erfolg prüfen	res.ok / res.status
JSON senden	body: JSON.stringify(...) + Content-Type
Abbrechen	AbortController + signal

Das deckt die alltäglichen Fälle ab. Die Fetch-API unterstützt außerdem das Streamen von Antwort-Bodies, FormData-Uploads sowie das Klonen von Anfrage/Antwort — aber die obigen Muster bewältigen die große Mehrheit realer Aufrufe.