JavaScript Fetch und APIs

fetch, async await, JSON, Fehlerbehandlung, Loading State und API-Daten anzeigen. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

• API-Daten mit fetch laden
• JSON lesen und anzeigen
• Lade- und Fehlerzustände behandeln

Erklärung

fetch sendet HTTP-Anfragen aus dem Browser. Viele APIs liefern JSON. Da Netzwerkzugriffe dauern oder fehlschlagen können, arbeitet man mit async und await sowie klaren UI-Zuständen.

response.ok sollte geprüft werden. Ein HTTP-Fehler führt nicht automatisch zu einem JavaScript-Fehler.

Beispiele

async function loadUsers() {
  status.textContent = "Lade Daten ...";

  try {
    const response = await fetch("/api/users");

    if (!response.ok) {
      throw new Error("API-Fehler");
    }

    const users = await response.json();
    renderUsers(users);
    status.textContent = "";
  } catch (error) {
    status.textContent = "Daten konnten nicht geladen werden.";
    console.error(error);
  }
}

Das Beispiel behandelt Ladezustand, HTTP-Fehler und Netzwerkfehler.

function renderUsers(users) {
  list.replaceChildren(...users.map((user) => {
    const item = document.createElement("li");
    item.textContent = user.name;
    return item;
  }));
}

Daten werden sicher als Text in DOM-Elemente geschrieben.

Typische Fehler

• response.ok nicht prüfen.
• Ladezustände vergessen.
• API-Daten ungeprüft mit innerHTML einfügen.

Best Practices

• Plane Loading, Empty, Success und Error State.
• Fange Fehler mit try...catch ab.
• Vertraue externen Daten nicht blind.

Kleine Übung

Baue eine kleine Beispiel-App, die Datensätze lädt, währenddessen "Lade ..." zeigt und bei Fehlern eine verständliche Meldung ausgibt.

Zusammenfassung

JavaScript ergänzt Webseiten um Verhalten. Robuster Code arbeitet mit klaren Daten, kleinen Funktionen, sicheren DOM-Operationen, guter Fehlerbehandlung und nachvollziehbarer Struktur.

Weiterführende Seiten

• Vorherige Seite: JavaScript Formulare
• Nächste Seite: Asynchrones JavaScript
• Zur Übersicht
• Asynchrones JavaScript
• Formulare und APIs