⚡ Part 3 - Async/Await: Moderne Syntax
💡 Async/Await macht asynchronen Code lesbar wie synchronen Code!
✅ async vor der Funktion = Diese Funktion ist asynchron
✅ await vor Promise = Warte auf das Ergebnis
✅ try/catch für Error Handling
1️⃣ Demo: Einfache Async Funktion
Eine async Funktion, die einen User lädt
2️⃣ Demo: Mit Error Handling (try/catch)
try/catch ersetzt .catch() und ist viel lesbarer!
3️⃣ Demo: Abhängige Requests (nacheinander)
Erst User laden, dann seine Posts. Mit await werden sie nacheinander ausgeführt.
4️⃣ Demo: Unabhängige Requests (parallel)
Mehrere Requests gleichzeitig starten mit Promise.all()
📊 Vergleich: .then() vs async/await
.then() Syntax (alt)
fetch('/api/user')
.then(r => r.json())
.then(user => {
console.log(user)
})
.catch(err => {
console.error(err)
})
async/await (modern) ✨
const getUser = async () => {
try {
const r = await fetch(...)
const user = await r.json()
console.log(user)
} catch (err) {
console.error(err)
}
}
📋 Ausgabe:
Klick auf einen Button um zu starten...