JavaScript

Die Fetch API: Daten vom Server laden

Mit der Fetch API holst du Daten von einem Server, ganz ohne externe Bibliotheken. Lerne GET- und POST-Anfragen sowie die Fehlerbehandlung kennen.

Anton

— 2 Min. Lesezeit
Teilen
Die Fetch API: Daten vom Server laden

Moderne Webanwendungen holen ständig Daten von einem Server: Wetterdaten, Produktlisten oder Nutzerprofile. Das Werkzeug dafür ist in jedem modernen Browser eingebaut und heißt Fetch API. In diesem Beitrag lernst du, wie du damit Daten lädst, JSON verarbeitest, Daten sendest und Fehler abfängst.

Was ist die Fetch API?

Die Funktion fetch schickt eine Anfrage an eine URL und gibt ein Promise zurück. Sobald die Antwort da ist, kannst du sie auswerten. Da fetch auf Promises basiert, passt es perfekt zu async/await, das wir hier durchgehend nutzen.

Eine einfache GET-Anfrage

Die häufigste Aufgabe ist das Abrufen von Daten. Du übergibst fetch eine URL und wartest auf die Antwort. Diese musst du dann mit .json() in ein JavaScript-Objekt umwandeln.

async function ladeDaten() {
  const antwort = await fetch("https://api.example.com/users");
  const daten = await antwort.json();
  console.log(daten);
}

ladeDaten();

Beachte die zwei await: Das erste wartet auf die Antwort, das zweite auf die Umwandlung des Antwort-Texts in JSON. Beide Schritte sind asynchron.

Den Antwortstatus prüfen

Ein wichtiges Detail: fetch wirft keinen Fehler, wenn der Server zum Beispiel mit einem 404 antwortet. Du musst die Eigenschaft response.ok selbst prüfen, um echte HTTP-Fehler zu erkennen.

async function ladeSicher(url) {
  const antwort = await fetch(url);

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

  return await antwort.json();
}

So stellst du sicher, dass du nur weitermachst, wenn die Anfrage wirklich erfolgreich war. Den Statuscode findest du in antwort.status.

Daten senden mit POST

Möchtest du Daten an den Server schicken, etwa beim Absenden eines Formulars, nutzt du eine POST-Anfrage. Dafür übergibst du fetch ein zweites Argument mit Optionen.

async function sendeNutzer() {
  const antwort = await fetch("https://api.example.com/users", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Lea", alter: 25 })
  });

  const ergebnis = await antwort.json();
  console.log("Angelegt:", ergebnis);
}

Wichtig ist hier dreierlei: method auf "POST" setzen, im Header den Content-Type angeben und den Body mit JSON.stringify in einen Text umwandeln.

Vollständige Fehlerbehandlung

In der Praxis kombinierst du alles in einem try/catch-Block. So fängst du sowohl Netzwerkfehler als auch HTTP-Fehler ab und kannst dem Nutzer eine sinnvolle Rückmeldung geben.

async function holeProdukte() {
  try {
    const antwort = await fetch("https://api.example.com/products");
    if (!antwort.ok) {
      throw new Error("Status " + antwort.status);
    }
    const produkte = await antwort.json();
    console.log("Geladen:", produkte.length, "Produkte");
  } catch (fehler) {
    console.log("Laden fehlgeschlagen:", fehler.message);
  }
}

holeProdukte();

Fazit

Die Fetch API ist dein eingebautes Werkzeug, um mit Servern zu kommunizieren. Mit einer einfachen GET-Anfrage lädst du Daten, mit POST sendest du sie, und über antwort.json() machst du aus der Antwort ein nutzbares Objekt. Vergiss dabei nie, response.ok zu prüfen und alles in try/catch zu verpacken. Damit hast du das Fundament, um echte datengetriebene Webanwendungen zu bauen.

Weiterlesen