Promise.prototype.then() — Methode · JavaScript-Referenz

Signatur

Promise.prototype.then(onFulfilled, onRejected)

Beschreibung

then() ist die grundlegende Methode, um auf das Ergebnis eines Promise zu reagieren. Der erste Callback läuft, sobald das Promise erfüllt ist, und bekommt den Wert. Der zweite, optionale Callback läuft, wenn das Promise abgelehnt wird, und bekommt den Ablehnungsgrund.

Wichtig: then() gibt immer ein neues Promise zurück. Dessen Zustand hängt davon ab, was der ausgeführte Callback tut:

Er gibt einen Wert zurück: Das neue Promise wird mit diesem Wert erfüllt.
Er gibt nichts zurück: Das neue Promise wird mit undefined erfüllt.
Er wirft einen Fehler: Das neue Promise wird mit diesem Fehler abgelehnt.
Er gibt ein Promise oder ein Thenable zurück: Das neue Promise übernimmt dessen Zustand. Dadurch sind flache Ketten ohne Verschachtelung möglich.

Die Callbacks laufen immer asynchron als Mikrotask, auch wenn das Promise schon erfüllt ist. Ist ein Argument keine Funktion, wird es durch eine Durchreich-Funktion ersetzt: der Wert bzw. Fehler geht unverändert an das nächste Glied der Kette. In modernem Code schreibt man dasselbe oft mit async/await. then() bleibt aber nützlich für kurze Transformationen, außerhalb von async-Funktionen und zum besseren Verständnis der Promise-Mechanik.

Parameter

Name	Typ	Default	Beschreibung
$onFulfilled	Function \| undefined	Durchreich-Funktion (x) => x	Wird mit dem Erfüllungswert aufgerufen. Ihr Rückgabewert bestimmt den Wert des neuen Promise. Ist das Argument keine Funktion, wird der Wert unverändert weitergereicht.
$onRejected	Function \| undefined	Werfer-Funktion (e) => { throw e; }	Wird mit dem Ablehnungsgrund aufgerufen. Gibt sie normal einen Wert zurück, wird das neue Promise erfüllt, der Fehler gilt dann als behandelt. Ist das Argument keine Funktion, wird der Fehler weitergereicht.

Rückgabewert

Typ

Promise<any>

Beschreibung

Ein neues Promise, das zunächst ausstehend ist. Es wird mit dem Ergebnis des ausgeführten Callbacks erfüllt bzw. abgelehnt oder übernimmt den Zustand eines zurückgegebenen Promise.

Beispiele

Einfacher Fall: Wert eines Promise verarbeiten

const warte = (ms, wert) => new Promise((resolve) => setTimeout(() => resolve(wert), ms));

warte(100, 21).then((zahl) => {
  console.log('Ergebnis:', zahl * 2);
});
console.log('Zuerst synchron');

Zuerst synchron Ergebnis: 42

Verkettung mit fetch: Antwort prüfen, JSON lesen, Daten nutzen

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP-Fehler ${response.status}`);
    }
    return response.json(); // Promise wird in der Kette aufgelöst
  })
  .then((user) => {
    console.log(`Name: ${user.name}`);
    return user.email;
  })
  .then((email) => console.log(`E-Mail: ${email}`))
  .catch((err) => console.error('Fehlgeschlagen:', err.message));

Name: Leanne Graham E-Mail: Sincere@april.biz

Zweites Argument im Vergleich zu catch()

const fehlerhaft = Promise.reject(new Error('Serverfehler'));

// onRejected fängt nur Fehler des vorherigen Promise ab
fehlerhaft.then(
  (wert) => console.log('Erfolg:', wert),
  (err) => {
    console.log('Behandelt:', err.message);
    return 'Fallback-Daten'; // Kette läuft erfüllt weiter
  }
).then((daten) => console.log('Weiter mit:', daten));

// Fehler im onFulfilled-Callback fängt das zweite Argument NICHT ab
Promise.resolve(1)
  .then(
    () => { throw new Error('Fehler im Erfolgs-Callback'); },
    () => console.log('wird nicht aufgerufen')
  )
  .catch((err) => console.log('catch:', err.message));

Behandelt: Serverfehler catch: Fehler im Erfolgs-Callback Weiter mit: Fallback-Daten

Asynchrone Schritte nacheinander ausführen

const ladeSchritt = (name) =>
  new Promise((resolve) => setTimeout(() => resolve(`${name} fertig`), 50));

ladeSchritt('Konfiguration')
  .then((msg) => {
    console.log(msg);
    return ladeSchritt('Benutzer'); // Promise zurückgeben, nicht verschachteln
  })
  .then((msg) => {
    console.log(msg);
    return ladeSchritt('Dashboard');
  })
  .then(console.log);

Konfiguration fertig Benutzer fertig Dashboard fertig

// Wichtig · Fallstricke

Das return vergessen: Startet ein Callback ein weiteres Promise, ohne es zurückzugeben, wartet die Kette nicht darauf. Fehler daraus gehen dann verloren. Gib Promises in Callbacks deshalb immer mit return zurück.
Nicht behandelte Ablehnungen: Ohne onRejected oder ein abschließendes .catch() entsteht ein unhandledrejection-Ereignis. In Node.js beendet das ab Version 15 standardmäßig den Prozess.
onRejected und .catch() sind nicht gleich: Das zweite Argument von then() fängt keine Fehler ab, die im onFulfilled desselben Aufrufs geworfen werden. Ein nachgestelltes .catch() fängt sie ab.
Immer asynchron: Callbacks laufen als Mikrotask nach dem aktuellen synchronen Code, auch bei bereits erfüllten Promises. Sie laufen aber vor setTimeout-Callbacks.
Kein echtes Verzweigen: Mehrere then()-Aufrufe auf demselben Promise erzeugen unabhängige Ketten. Sie reichen ihre Werte nicht aneinander weiter.
Verschachtelung vermeiden: then() innerhalb von then() führt zurück in die „Callback-Hölle“. Besser sind flache Ketten oder async/await.
Kompatibilität: Wird von allen modernen Browsern und von Node.js ab Version 0.12 unterstützt. Der Internet Explorer braucht einen Polyfill.

Siehe auch

Promise Promise.prototype.catch() Promise.prototype.finally() Promise.all() Promise.resolve() async function await