fetch() mit async/await und sauberem try/catch

fetch() ist der moderne Weg, im Browser Daten zu laden. Mit async/await liest sich der Code fast wie synchroner Code. Ein Stolperstein, den ich immer wieder sehe: fetch() wirft nur bei Netzwerkfehlern eine Exception – ein HTTP-Status wie 404 oder 500 gilt technisch als „erfolgreich". Deshalb musst du response.ok selbst prüfen.

Die Funktion

async function ladeBenutzer(id) {
  try {
    const response = await fetch(`/api/users/${id}`, {
      headers: { Accept: 'application/json' },
    });

    // fetch wirft NICHT bei 404/500 – deshalb hier selbst prüfen:
    if (!response.ok) {
      throw new Error(`Server antwortete mit ${response.status}`);
    }

    const daten = await response.json();
    return daten;
  } catch (fehler) {
    // Landet hier bei Netzwerkabbruch ODER dem oben geworfenen Fehler.
    console.error('Laden fehlgeschlagen:', fehler.message);
    throw fehler; // an den Aufrufer weiterreichen
  }
}

Aufrufen

ladeBenutzer(42)
  .then((user) => {
    document.querySelector('#name').textContent = user.name;
  })
  .catch(() => {
    document.querySelector('#name').textContent = 'Konnte nicht geladen werden.';
  });

Die zwei Dinge, die diesen Code robust machen: die response.ok-Prüfung, damit Fehlercodes nicht als leere Daten durchrutschen, und das try/catch, das Netzwerkabbruch und HTTP-Fehler an einer Stelle einfängt. Wenn du willst, kannst du mit AbortController obendrauf noch ein Timeout ergänzen.

Genau so binde ich in meinen Websites Formulare und Live-Daten an. Wenn du eine moderne Seite mit dynamischen Inhalten brauchst, findest du mich auf bymw.de.

Quellen

• Die Fetch API verwenden – MDN Web Docs
• Response.ok – MDN Web Docs