Fehlerbehandlung
Fehler passieren. Gute Programme machen sie sichtbar, erklären sie verständlich und bleiben bei Netzwerkproblemen handlungsfähig.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
try/catch und async
try/catch fängt Fehler im synchronen Code.
Bei Promises brauchst du .catch() oder try/catch in einer async-Funktion.
finally läuft in jedem Fall und eignet sich für Aufräumarbeiten. Fehler sollten nicht stillschweigend verschluckt werden.
async function ladeProfil() {
try {
const antwort = await fetch("/api/profil");
if (!antwort.ok) throw new Error("Profil konnte nicht geladen werden");
return await antwort.json();
} catch (fehler) {
console.error(fehler);
return null;
}
}Fehler sichtbar machen
Nutzer brauchen eine verständliche Meldung und einen nächsten Schritt, nicht den rohen Stack Trace.
Entwickler brauchen Details im Log. Globale Handler für error und unhandledrejection helfen, unerwartete Fehler nicht zu verlieren.
window.addEventListener("unhandledrejection", (event) => {
console.error("Unbehandeltes Promise:", event.reason);
});Resiliente Datenflüsse
Ein Fallback hält die Oberfläche nutzbar, wenn Daten fehlen.
Ein Retry sollte begrenzt sein und nur bei temporären Fehlern laufen.
Mit AbortController und einem Timeout verhinderst du, dass eine Anfrage ewig hängt. Jede Wiederholung braucht eine klare Obergrenze.
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 3000);
try {
const antwort = await fetch("/api/daten", { signal: controller.signal });
return await antwort.json();
} finally {
clearTimeout(timeout);
}Vertiefung
Fehler sichtbar und beherrschbar machen
try/catch fängt synchrone Fehler, async-Funktionen brauchen await im try-Block oder .catch am Promise. finally eignet sich für Aufräumarbeiten.
Gute Fehlerbehandlung zeigt Nutzern eine verständliche Meldung und Entwicklern Details im Log. Fallbacks und begrenzte Retries halten die Oberfläche nutzbar, ohne Fehler zu verstecken.
async function ladeDaten() {
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 3000);
try {
const antwort = await fetch("/api/daten", { signal: controller.signal });
if (!antwort.ok) throw new Error("Serverfehler");
return await antwort.json();
} catch (fehler) {
console.error(fehler);
return [];
} finally {
clearTimeout(timeout);
}
}Merksatz: Fehler nicht verschlucken: verständlich melden, loggen, Fallback anbieten und Timeouts setzen.
Übungsaufgabe
Robuster fetch mit Fallback
Schreibe eine async-Funktion, die Daten lädt, bei Fehler einen leeren Zustand zurückgibt und nach drei Sekunden abbricht.
Das soll dein Programm können
- AbortController mit Timeout
- try/catch um fetch und json
- HTTP-Status prüfen
- Fallback zurückgeben
- Fehler im Log ausgeben
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Erstelle einen Controller, setze setTimeout auf controller.abort() und gib das Signal an fetch. Räume den Timer im finally auf.
Lösung anzeigen
async function ladeDaten() {
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 3000);
try {
const antwort = await fetch("/api/daten", { signal: controller.signal });
if (!antwort.ok) {
throw new Error(`HTTP ${antwort.status}`);
}
return await antwort.json();
} catch (fehler) {
console.error("Daten konnten nicht geladen werden:", fehler);
return [];
} finally {
clearTimeout(timeout);
}
}Warum funktioniert das?
Der Controller bricht die Anfrage nach drei Sekunden ab. Der catch-Zweig liefert einen sicheren Fallback, finally räumt den Timer auf. Die Oberfläche bleibt handlungsfähig.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Sichere Datenkarte
Lade Daten mit fetch, zeige sie sicher mit textContent an und fange Fehler mit einem Fallback ab.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.