fetch() mit async/await und sauberem try/catch
Daten von einer API holen ist mit fetch() und async/await lesbar wie synchroner Code. Der Haken: fetch wirft bei 404 oder 500 keinen Fehler – du musst response.ok selbst prüfen.
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
Du brauchst mehr als ein Snippet?
Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.
Projekt anfragen →Verwandte Snippets
Promise.allSettled – wenn ein einziger Fehlschlag nicht alles kippen darf
Promise.all bricht beim ersten Fehler ab und wirft alle anderen Ergebnisse weg. Für ein Dashboard aus fünf Quellen ist das genau falsch: Vier Kacheln könnten Daten zeigen, aber die Seite bleibt leer.
Formulare ohne Neuladen abschicken – FormData und fetch
Ein Formular per JavaScript abzuschicken heißt nicht, jedes Feld einzeln auszulesen. FormData nimmt das ganze Formular, fetch schickt es weg – inklusive Dateien, und mit einer Fehlermeldung, die der Besucher versteht.
Web Worker – rechnen, ohne die Oberfläche einzufrieren
JavaScript hat im Browser genau einen Faden für alles: Klicks, Animationen, Layout – und deine Rechenschleife. Dauert die zwei Sekunden, ist die Seite zwei Sekunden lang tot. Ein Worker nimmt die Arbeit auf einen eigenen Faden.