Fetch, JSON und asynchrone Abläufe

Lernziele

HTTP-Daten laden und Lade-, Fehler- und Erfolgszustände darstellen. Nach dieser Lektion kannst du das Konzept erklären, ein kleines Beispiel umsetzen und typische Grenzen benennen.

Erklärung

fetch gibt ein Promise zurück. await pausiert innerhalb einer async-Funktion bis zum Ergebnis. Ein erfolgreicher HTTP-Transport kann trotzdem einen Fehlerstatus liefern; prüfe response.ok. JSON muss geparst und als untrusted Eingabe behandelt werden.

Schrittweises Beispiel

const response = await fetch("/api/items"); if (!response.ok) throw new Error("Request fehlgeschlagen"); const items = await response.json(); trennt Transport und Parsing.

async function loadItems() {
  const response = await fetch("/api/items");
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}

Zusammenfassung

Asynchronität ist kontrollierter Ablauf, keine Garantie für Erfolg oder Reihenfolge.