Fetch & APIs (Daten aus dem Internet abholen)

💡 Die Kernidee im Alltag:

"Moderne Webseiten wie Instagram oder Wetter-Apps laden Daten im Hintergrund nach, ohne dass die ganze Seite neu laden muss."

Wie es wirklich funktioniert (Erklärt für 12-Jährige)

Daten im Hintergrund abrufen mit async / await:

async function ladeWetter() {
  // 1. Daten beim Server anfragen
  const antwort = await fetch("https://api.wetter.de/berlin");
  
  // 2. Antwort in lesbares JSON umwandeln
  const daten = await antwort.json();
  
  // 3. Wert anzeigen
  console.log("Temperatur:", daten.temperatur);
}

KI-Power-Tipp für Entwickler

Empfohlener Assistent: Cursor / Claude

Golden Prompt für deinen Editor:

Schreibe eine robuste async/await fetch-Funktion mit try/catch-Block, die auch HTTP-Fehlercodes wie 404 und 500 sauber mit response.ok prüft.

Qualitäts-Prüfung: Stelle sicher, dass `if (!res.ok) throw new Error(...)` vorhanden ist, da `fetch` bei 404 nicht von alleine in den catch-Block springt.

Vorherige Lektion: Events (Auf Klicks und Tastendrücke reagieren)

Nächste Lektion: Warum TypeScript? (Fehler finden, bevor sie passieren)

Interaktive Übung & lokaler Testlauf

Erstelle eine asynchrone Funktion `async function getWetter() { const res = await fetch('/api/wetter'); return await res.json(); }`.