Promises: then, catch, finally, Promise.all
Erstellen und verketten Sie Promises, behandeln Sie Fehler in catch-Blöcken, führen Sie Aufräumarbeiten in finally aus und führen Sie mehrere Promises mit Promise.all parallel aus.
Promises: then, catch, finally, Promise.all ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist ein Promise?
Ein Promise repräsentiert einen Wert, der in Zukunft verfügbar sein wird. Es ist ein Objekt mit einem von drei Zuständen: pending (ausstehend), fulfilled (erfüllt) oder rejected (abgelehnt). Sobald ein Promise abgeschlossen ist, bleibt sein Zustand dauerhaft unverändert.
Ein Promise erstellen
Erstellen Sie ein Promise mit dem Konstruktor new Promise(executor). Die Executor-Funktion erhält die Callbacks resolve und reject. Rufen Sie resolve mit dem Erfolgswert oder reject mit einem Fehler auf.
const delay = (ms) => new Promise((resolve) => {
setTimeout(resolve, ms);
});
const fetchData = (url) => new Promise((resolve, reject) => {
fetch(url)
.then(res => res.json())
.then(resolve)
.catch(reject);
});.then() – Erfolge verarbeiten
promise.then(onFulfilled) registriert einen Callback, der ausgeführt wird, wenn das Promise erfüllt wird. Er erhält den aufgelösten Wert. .then() gibt ein neues Promise zurück und ermöglicht dadurch Verkettungen.
fetch('/api/users')
.then(response => response.json())
.then(users => {
console.log('Users:', users);
return users.length;
})
.then(count => console.log('Count:', count));.catch() – Fehler behandeln
promise.catch(onRejected) behandelt Ablehnungen. Am Ende einer Kette platziert, fängt die Methode jeden Fehler aus einem beliebigen vorherigen Schritt ab.
fetch('/api/data')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => processData(data))
.catch(err => {
console.error('Failed:', err.message);
showErrorToUser();
});.finally() – Immer ausführen
promise.finally(onFinally) wird ausgeführt, unabhängig davon, ob das Promise erfüllt oder abgelehnt wurde. Die Methode eignet sich ideal für Aufräumarbeiten: einen Ladeindikator ausblenden, eine Sperre freigeben oder Analysedaten protokollieren.
showSpinner();
fetch('/api/data')
.then(res => res.json())
.then(render)
.catch(handleError)
.finally(() => hideSpinner()); // always runsPromise-Verkettung – Werte zurückgeben
Geben Sie aus .then() einen Wert zurück, wird dieser zum aufgelösten Wert des nächsten .then(). Geben Sie ein neues Promise zurück, um asynchrone Vorgänge sequenziell zu verketten.
getUser(id)
.then(user => getOrders(user.id)) // return Promise
.then(orders => orders[0]) // return value
.then(order => console.log(order)); // receive orderPromise.all() – Parallel ausführen
Promise.all([p1, p2, p3]) wartet, bis alle Promises aufgelöst sind, und gibt ein Array mit den Ergebnissen in derselben Reihenfolge zurück. Wenn ein Promise abgelehnt wird, wird die gesamte Operation sofort abgelehnt.
const [user, posts, comments] = await Promise.all([
fetch('/api/user/1').then(r => r.json()),
fetch('/api/posts').then(r => r.json()),
fetch('/api/comments').then(r => r.json()),
]);
// All three run in parallel — much faster than sequentialPromise.allSettled() – Nicht beim ersten Fehler abbrechen
Promise.allSettled() wartet, bis alle Promises abgeschlossen sind (aufgelöst oder abgelehnt), und gibt ein Array von Ergebnisobjekten mit {status, value} oder {status, reason} zurück. Das ist nützlich, wenn ein einzelner Fehler nicht alle Ergebnisse verhindern soll.
const results = await Promise.allSettled([p1, p2, p3]);
results.forEach(result => {
if (result.status === 'fulfilled') use(result.value);
else logError(result.reason);
});Promise.race() und Promise.any()
Promise.race() wird mit dem zuerst abgeschlossenen Promise aufgelöst oder abgelehnt. Promise.any() wird mit dem zuerst erfüllten Promise aufgelöst (Ablehnungen werden ignoriert; die Methode wird nur abgelehnt, wenn alle Promises abgelehnt werden). Das ist nützlich für Zeitüberschreitungen und Redundanz.
// Timeout pattern:
const withTimeout = (promise, ms) => Promise.race([
promise,
new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), ms))
]);Bereits abgeschlossene Promises erstellen
Promise.resolve(value) erstellt ein Promise, das bereits mit value erfüllt ist. Promise.reject(error) erstellt ein bereits abgelehntes Promise. Das ist nützlich für Tests und Adapterfunktionen.
const p = Promise.resolve(42);
p.then(v => console.log(v)); // 42Ereignisse bei unbehandelten Ablehnungen
Wenn ein Promise ohne .catch() abgelehnt wird, entsteht eine unbehandelte Ablehnung. Moderne Browser und Node.js geben Warnungen aus. Hängen Sie immer ein .catch() an oder verwenden Sie try/catch mit async/await.
window.addEventListener('unhandledrejection', event => {
console.error('Unhandled rejection:', event.reason);
event.preventDefault();
});Schnelltest
Welche statische Methode führt mehrere Promises parallel aus und wird mit einem Array aller Ergebnisse aufgelöst?
Zusammenfassung: Promises
.then() für Erfolge, .catch() für Fehler und .finally() für Aufräumarbeiten. Ketten geben Werte weiter. Promise.all() führt Vorgänge parallel aus. Promise.allSettled() toleriert Teilergebnisse. Promise.race() liefert das schnellste Ergebnis. Behandeln Sie Ablehnungen immer. Moderner Code verwendet async/await als syntaktische Kurzform für Promises.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „Promises: then, catch, finally, Promise.all“ kostenlos?
Ja — der vollständige Text von „Promises: then, catch, finally, Promise.all“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Promises: then, catch, finally, Promise.all“?
Erstellen und verketten Sie Promises, behandeln Sie Fehler in catch-Blöcken, führen Sie Aufräumarbeiten in finally aus und führen Sie mehrere Promises mit Promise.all parallel aus. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Promises: then, catch, finally, Promise.all“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Die Event Loop: Call Stack, Queue, Microtasks
- Callbacks und Callback Hell
- Promises: then, catch, finally, Promise.all
- async/await und Fehlerbehandlung