📖 1. Warum Async/Await?
Mit async/await (ES2017) gehört unübersichtliches Promise-Chaining der Vergangenheit an. Asynchroner Code liest sich nun von oben nach unten wie ganz normaler, synchroner Code.
📚 Die Buch-Lese-Analogie
Vorher (Callbacks & .then()): Wie ein Buch, bei dem jedes Kapitel auf Fußnoten verweist („Lies auf Seite 80 weiter, um die Antwort zu finden“).
Jetzt (Async/Await): Du liest das Buch ganz entspannt Zeile für Zeile von oben nach unten. Bei await pausiert der Erzähler kurz, holt die Information ab und liest genau an der Stelle flüssig weiter!
⚖️ 2. Gegenüberstellung: Promises vs. Async/Await
⏳ Früher: Promise .then() Chaining
function ladeProfil(id) {
fetch(`/api/user/${id}`)
.then(res => {
if (!res.ok) throw new Error("404");
return res.json();
})
.then(user => {
console.log("Name:", user.name);
})
.catch(err => {
console.error("Fehler:", err);
});
}✨ Heute: Modernes Async/Await
async function ladeProfil(id) {
try {
const res = await fetch(`/api/user/${id}`);
if (!res.ok) throw new Error("404");
const user = await res.json();
console.log("Name:", user.name);
} catch (err) {
console.error("Fehler:", err);
}
}🌐 3. REST-APIs konsumieren
Typischer 2-Schritt-Ablauf beim Abrufen einer JSON-REST-API:
const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP-Fehler: ${res.status}`);
const daten = await res.json();
🎯 Aufgaben & Checkliste (Subgoals)
💡 Lösungstipps & Hilfestellung
- Deklariere jede asynchrone Funktion mit
async function .... - Prüfe vor
await res.json()immer mitif (!res.ok)auf HTTP-Fehler. - Im
try / catch-Block fängst du fehlgeschlagene Promises sauber ab und lieferst den Fallback-Wert.