JavaScript 9 — Fetch API & HTTP

In dieser Lektion lernst du, wie JavaScript mit externen Daten kommuniziert. Fast jede moderne Webanwendung lädt oder sendet Daten über das Netzwerk. Dafür brauchst du ein solides Verständnis von HTTP und der Fetch API.

1. Warum Daten laden?

Definition.
Webanwendungen sind selten isoliert. Sie kommunizieren mit Servern, APIs und Datenbanken, um Informationen zu laden oder zu speichern.

Typische Beispiele:

Benutzerdaten laden (Profile, Einstellungen)
Listen anzeigen (Produkte, Beiträge, Kommentare)
Formulare absenden
Daten aktualisieren, ohne die Seite neu zu laden

2. HTTP — das Fundament

HTTP (Hypertext Transfer Protocol) ist das Protokoll, über das Browser und Server miteinander kommunizieren.

Ein HTTP-Austausch besteht aus:

einer Anfrage (Request)
einer Antwort (Response)

2.1 Wichtige HTTP-Methoden

GET — Daten abrufen
POST — neue Daten senden
PUT/PATCH — Daten ändern
DELETE — Daten löschen

Die Methode beschreibt die Absicht der Anfrage.

2.2 HTTP-Statuscodes

Statuscodes geben an, ob eine Anfrage erfolgreich war.

200 — OK
201 — Created
400 — Bad Request
401 — Unauthorized
404 — Not Found
500 — Server Error

3. Die Fetch API

Die Fetch API ist die moderne Standard-Schnittstelle, um HTTP-Anfragen in JavaScript zu senden.

fetch ist asynchron und gibt immer ein Promise zurück.

3.1 Einfacher GET-Request

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

response.json() liest den Antwort-Body und gibt ebenfalls ein Promise zurück.

4. fetch mit async & await

Mit async/await wird Fetch-Code deutlich lesbarer.

async function loadData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

loadData();

5. Fehlerbehandlung bei fetch

Ein HTTP-Fehler (z. B. 404) wirft keinen JavaScript-Fehler. Er muss explizit geprüft werden.

async function loadData() {
  const response = await fetch("https://api.example.com/data");

  if (!response.ok) {
    throw new Error("HTTP-Fehler: " + response.status);
  }

  return response.json();
}

response.ok ist false bei Statuscodes ≥ 400.

6. POST-Requests: Daten senden

Mit fetch können auch Daten an einen Server gesendet werden.

fetch("https://api.example.com/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "Iman",
    age: 22
  })
});

Der Request-Body muss bei JSON-Daten als String gesendet werden.

7. JSON — das Standardformat

JSON (JavaScript Object Notation) ist das Standardformat für den Datenaustausch im Web.

// JavaScript → JSON
const json = JSON.stringify({ a: 1 });

// JSON → JavaScript
const obj = JSON.parse(json);

8. Fetch und das DOM

In echten Anwendungen werden geladene Daten meist direkt im DOM angezeigt.

async function showUsers() {
  const res = await fetch("https://api.example.com/users");
  const users = await res.json();

  const list = document.querySelector("#list");
  list.innerHTML = "";

  users.forEach(user => {
    const li = document.createElement("li");
    li.textContent = user.name;
    list.appendChild(li);
  });
}

9. Typische Fehler

Vergessen von await
Nichtprüfen von response.ok
Falsche Header bei POST-Requests
Annahme, dass fetch bei 404 automatisch scheitert

10. Übungen

Übung 1.
Lade Daten von einer öffentlichen API (z. B. JSONPlaceholder) und gib sie in der Konsole aus.

Übung 2.
Zeige eine Liste von Einträgen im HTML an, die per fetch geladen werden.

Übung 3.
Sende mit POST ein Objekt an eine Test-API und überprüfe die Antwort.

11. Zusammenfassung

HTTP ist die Grundlage der Webkommunikation
Fetch ist die moderne API für Netzwerkanfragen
Promises und async/await sind zentral
Fehler müssen explizit behandelt werden

Wer Fetch und HTTP versteht, verbindet Frontend und Backend.