Advanced Async
Mehrere Promises koordinieren, Anfragen abbrechen, parallel statt nacheinander laden — die Muster für echte Apps.
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
Promise.all
Promise.all wartet auf alle Promises und liefert die Ergebnisse als Array — schlägt aber komplett fehl, wenn eines abgelehnt wird.
Paralleles Laden ist oft deutlich schneller als await nacheinander.
const [statusRes, statsRes] = await Promise.all([
fetch('/api/status'),
fetch('/api/quiz/stats/123')
]);allSettled, race, any
Promise.allSettled wartet auf alle und liefert pro Promise Erfolg oder Fehler — nichts geht verloren.
Promise.race nimmt das erste fertige Ergebnis, Promise.any das erste erfolgreiche.
Abbrechen mit AbortController
AbortController liefert ein Signal, das fetch abbrechen kann — etwa wenn der Nutzer weiter navigiert.
Timeouts für Anfragen lassen sich damit sauber umsetzen.
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);
fetch('/api/langsam', { signal: controller.signal })
.catch(() => console.log('Abgebrochen'));Vertiefung
Parallelität und Abbruch
Promise.all startet alle Promises parallel und wartet auf alle. Scheitert eines, scheitert das Gesamtergebnis. allSettled liefert dagegen für jedes Promise Erfolg oder Fehler.
AbortController liefert ein Signal, mit dem fetch abgebrochen werden kann. So verhinderst du veraltete Antworten, wenn der Nutzer weiterklickt.
const [a, b] = await Promise.all([
fetch("/api/a"),
fetch("/api/b")
]);Merksatz: Unabhängige Anfragen parallel starten. Für Fehlertoleranz allSettled, für Abbruch AbortController verwenden.
Übungsaufgabe
Parallele API
Lade zwei Endpunkte parallel mit Promise.all. Fange Fehler ab und zeige mit allSettled, wie du trotz eines Fehlers alle Ergebnisse behältst.
Das soll dein Programm können
- Promise.all mit zwei fetch-Aufrufen
- Ergebnisse mit await lesen
- Promise.allSettled als Vergleich
- Fehlerfall erklären
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
Promise.all([fetch("/a"), fetch("/b")]) gibt ein Promise auf ein Array zurück. Für allSettled bekommst du Objekte mit status.
Lösung anzeigen
async function ladeAlles() {
try {
const [status, stats] = await Promise.all([
fetch("/api/status"),
fetch("/api/stats")
]);
console.log(status.status, stats.status);
} catch (error) {
console.error("Mindestens eine Anfrage ist fehlgeschlagen", error);
}
const ergebnisse = await Promise.allSettled([
fetch("/api/status"),
fetch("/api/unbekannt")
]);
console.log(ergebnisse.map((e) => e.status));
}
ladeAlles();Warum funktioniert das?
Promise.all bricht beim ersten Fehler ab. allSettled wartet auf alle und liefert status-Werte, sodass du erfolgreiche Teile weiterverwenden kannst.
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.