Async
Asynchroner Code wartet nicht: Daten laden, ohne die Seite einzufrieren. Promises und async/await machen das lesbar.
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
Promises
Ein Promise ist ein Platzhalter für einen Wert, der später ankommt — oder für einen Fehler.
then verarbeitet das Ergebnis, catch den Fehler. Promises lassen sich verketten.
fetch
fetch lädt Daten von einem Server und liefert ein Promise auf die Antwort.
response.json() parst den Body — ebenfalls asynchron.
const response = await fetch('/api/status');
const data = await response.json();
console.log(data.status);async / await
async markiert eine Funktion als asynchron, await pausiert bis ein Promise fertig ist.
Fehler werden mit try/catch behandelt — wie bei synchronem Code.
async function ladeProfil() {
try {
const response = await fetch('/api/profil');
if (!response.ok) throw new Error('Serverfehler');
return await response.json();
} catch (error) {
console.error('Laden fehlgeschlagen:', error);
return null;
}
}Vertiefung
Promises sind Zustände
Ein Promise ist zunächst pending, dann fulfilled oder rejected. await pausiert nur die aktuelle async-Funktion, nicht den gesamten Browser.
Fehler mit try/catch behandeln und response.ok prüfen. Ein HTTP-404 ist für fetch kein automatischer Fehler.
async function ladeStatus() {
try {
const response = await fetch("/api/status");
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return await response.json();
} catch (error) {
console.error(error);
return null;
}
}Merksatz: async/await macht asynchronen Code lesbar, aber Fehlerbehandlung und response.ok bleiben deine Aufgabe.
Übungsaufgabe
Profil laden
Schreibe eine async-Funktion, die ein Profil lädt, den Status prüft und bei einem Fehler null zurückgibt. Gib Name und XP aus.
Das soll dein Programm können
- async-Funktion
- fetch und response.ok
- try/catch
- await response.json()
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
Nach fetch musst du response.ok prüfen. Fehler wirfst du mit throw new Error(...) und fängst sie im catch.
Lösung anzeigen
async function ladeProfil() {
try {
const response = await fetch("/api/profil");
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const profil = await response.json();
console.log(`${profil.name}: ${profil.xp} XP`);
return profil;
} catch (error) {
console.error("Profil konnte nicht geladen werden", error);
return null;
}
}
ladeProfil();Warum funktioniert das?
await wartet auf fetch und json. Der catch-Block verhindert eine unbehandelte Rejection und liefert einen klaren Fallback.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Der Lernzähler
Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.
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.