Netzwerkanfragen, Dateilesevorgänge und Timer werden alle später beendet, aber JavaScript kann nicht einfach anhalten und warten, sonst würde die Seite einfrieren. JavaScript-Versprechungen geben Ihnen eine klare Möglichkeit zu sagen: „Wenn dies erledigt ist, tun Sie das, und wenn es fehlschlägt, tun Sie stattdessen dies.“

Selbst wenn Sie hauptsächlich async und await schreiben, verwenden Sie darunter Versprechen, sodass das Debuggen erheblich einfacher wird, wenn Sie sie verstehen. Wir haben diese Beispiele auf Node.js 24 ausgeführt und die angezeigte Ausgabe stammt von diesem Lauf. In modernen Browsern verhalten sie sich genauso.

Was ist ein Versprechen?

Ein Versprechen ist ein Platzhalter für einen zukünftigen Wert. Denken Sie an den Summer, den Ihnen ein Restaurant gibt, wenn Sie bestellen. Sie haben Ihr Essen noch nicht, aber Sie halten etwas in der Hand, das Ihnen sagt, wann es fertig ist oder dass es ein Problem gibt, und in der Zwischenzeit können Sie andere Dinge tun.

Im Code gibt eine asynchrone Funktion sofort ein Versprechen zurück und Sie hängen an, was als nächstes passieren soll:

fetch("/api/user")
  .then((response) => response.json())
  .then((user) => console.log(user.name))
  .catch((error) => console.log("Failed:", error.message));

Die drei Versprechensstaaten

Ein Versprechen, das erfüllt oder abgelehnt wird, wird als erfüllt bezeichnet. Ein Versprechen kann nur einmal erfüllt werden. Danach werden Status und Wert festgelegt und spätere Aufrufe von resolve oder reject werden ignoriert.

Erstellen Sie ein Versprechen

Normalerweise konsumieren Sie Versprechen von APIs wie fetch, aber das Erstellen eines solchen zeigt, wie sie funktionieren. Der Konstruktor erhält zwei Funktionen, resolve und reject:

function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ id, name: "Asha" });
      } else {
        reject(new Error("Invalid id"));
      }
    }, 100);
  });
}

console.log(fetchUser(1));

// Promise { <pending> }

Das sofortige Protokollieren des Versprechens zeigt, dass es noch aussteht, da der Timer nicht ausgelöst wurde. Der Wert kann nur über einen Handler oder await erreicht werden. Lehnen Sie immer mit einem Error-Objekt und nicht mit einer Zeichenfolge ab, da ein Error einen Stack-Trace enthält, der beim Debuggen hilft.

dann, fangen und endlich

Diese drei Methoden verknüpfen Handler mit einem Versprechen:

fetchUser(1).then((user) => console.log(user.name));
// Asha

fetchUser(-1)
  .then((user) => console.log("never runs", user))
  .catch((error) => console.log("caught:", error.message))
  .finally(() => console.log("finally"));

// caught: Invalid id
// finally

then wird bei Erfolg ausgeführt, catch wird bei Fehler ausgeführt und finally wird in beide Richtungen ausgeführt. Das macht finally zum richtigen Ort für Aufräumarbeiten, beispielsweise zum Verstecken eines Ladespinners. Es erhält keine Argumente, da ihm das Ergebnis egal sein sollte.

Versprechen verketten

Die Schlüsselidee ist, dass then immer ein neues Versprechen zurückgibt. Was auch immer Ihr Handler zurückgibt, wird zum Wert dieses neuen Versprechens:

Promise.resolve(2)
  .then((n) => n * 10)
  .then((n) => n + 1)
  .then((n) => console.log("chain:", n));

// chain: 21

Wenn ein Handler ein weiteres Versprechen zurückgibt, wartet die Kette, bis das Versprechen abgewickelt ist, bevor sie fortfährt. Dadurch werden verschachtelte Rückrufe zu einer flachen Abfolge von Schritten:

getUser(id)
  .then((user) => getOrders(user.id))
  .then((orders) => getInvoice(orders[0].id))
  .then((invoice) => console.log(invoice.total))
  .catch(handleError);

Wie Fehler durch eine Kette wandern

Ein abgelehntes Versprechen überspringt alle then, bis es eine catch erreicht. Als Zurückweisung gilt auch das Werfen in einen Hundeführer hinein. Und eine catch, die normalerweise zurückkehrt, bringt die Kette wieder auf Kurs:

Promise.resolve("start")
  .then(() => {
    throw new Error("step 2 failed");
  })
  .then(() => console.log("skipped"))
  .catch((error) => {
    console.log("caught:", error.message);
    return "recovered";
  })
  .then((value) => console.log("continues:", value));

// caught: step 2 failed
// continues: recovered

Stellen Sie sich dies als die asynchrone Version von try und catch vor. Eine catch am Ende deckt normalerweise die gesamte Kette ab. Wenn Sie nur einen Fehler protokollieren möchten und dieser trotzdem fehlschlägt, werfen Sie ihn erneut aus catch.

Promise.all, allSettled, Rasse und alle

Diese statischen Methoden koordinieren mehrere Versprechen gleichzeitig. Sie alle nehmen ein Array und geben ein Versprechen zurück.

Um sie zu testen, haben wir zwei kleine Helfer verwendet, einen, der nach einer Verzögerung erfolgreich ist, und einen, der nach einer Verzögerung fehlschlägt:

const wait = (ms, value) =>
  new Promise((resolve) => setTimeout(() => resolve(value), ms));
const fail = (ms, message) =>
  new Promise((_, reject) => setTimeout(() => reject(new Error(message)), ms));

Promise.all

await Promise.all([wait(300, "a"), wait(100, "b"), wait(200, "c")]);

// [ 'a', 'b', 'c' ]   took about 300 ms

Zwei Details, die es zu beachten gilt. Die Ergebnisse behalten die Eingabereihenfolge bei, auch wenn b zuerst fertig wurde. Und die Gesamtzeit betrug etwa 300 ms, die Zeit der langsamsten Aufgabe und nicht die 600 ms-Summe, da alle drei bereits gleichzeitig liefen. Wenn einer von ihnen ablehnt, lehnt das Ganze sofort ab:

await Promise.all([wait(100, "a"), fail(50, "b failed")]);

// rejected: b failed

Promise.allSettled

Dadurch wird auf alles gewartet und jedes Ergebnis gemeldet, sodass nicht ein Fehler den Rest verliert. Es eignet sich für ein Dashboard, bei dem jedes Widget unabhängig geladen wird:

const results = await Promise.allSettled([wait(50, "a"), fail(50, "b failed")]);
results.map((r) => r.status);

// [ 'fulfilled', 'rejected' ]

Promise.race und Promise.any

await Promise.race([wait(300, "slow"), wait(100, "fast")]);   // fast
await Promise.any([fail(50, "x"), wait(100, "ok")]);          // ok

Der Unterschied besteht darin, dass race die erste Lösung annimmt, auch wenn sie fehlschlägt, während any Fehler ignoriert, solange etwas erfolgreich ist. Eine klassische Verwendung von race besteht darin, einer langsamen Anfrage ein Timeout hinzuzufügen, obwohl die langsamere Aufgabe im Hintergrund weiterläuft, sofern Sie sie nicht abbrechen.

Versprechen und asynchron/warten

async und await sind eine besser lesbare Möglichkeit, mit denselben Versprechen zu arbeiten. Eine async-Funktion gibt immer ein Versprechen zurück und await hält diese Funktion an, bis ein Versprechen erfüllt ist:

async function showInvoice(id) {
  try {
    const user = await getUser(id);
    const orders = await getOrders(user.id);
    console.log(orders.length);
  } catch (error) {
    console.log("Failed:", error.message);
  }
}

Ablehnungen werden zu geworfenen Fehlern, sodass normales try und catch funktioniert. Für paralleles Arbeiten benötigen Sie weiterhin Promise.all, da sie beim Warten auf einen Aufruf nach dem anderen nacheinander ausgeführt werden. Unser JavaScript-Async/Await-Leitfaden geht näher darauf ein.

Versprechen und die Ereignisschleife

Promise-Handler werden nie sofort angerufen, selbst wenn das Promise bereits erfüllt ist. Sie werden ausgeführt, nachdem der aktuelle Code beendet ist und vor etwaigen Timern. Hier ist der Beweis:

setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("microtask"));
console.log("sync");

// sync
// microtask
// timeout

Synchroner Code wird zuerst ausgeführt. Als nächstes kommt die Mikrotask-Warteschlange, die Promise-Handler enthält. Erst dann übernimmt die Ereignisschleife die nächste Aufgabe, beispielsweise einen Timer. Dies ist eine beliebte Frage in Vorstellungsgesprächen und sie erklärt, warum eine setTimeout von Null nicht wirklich unmittelbar ist.

Versprechen vs. Rückrufe

Häufige Fehler

• Vergessen, nach innen zurückzukehren then. Ohne eine return erhält der nächste Schritt undefined und wartet nicht auf Ihr inneres Versprechen.
• Überhaupt nicht catch. Dies führt zu einer unbehandelten Ablehnung und stoppt in Node.js den Prozess standardmäßig.
• Verschachtelung statt Verkettung. Das Einfügen von then in then erzeugt die Callback-Hölle. Geben Sie das Versprechen zurück und setzen Sie die Kette fort.
• Ein Versprechen in new Promise einschließen. Wenn eine Funktion bereits ein Versprechen zurückgibt, verwenden Sie es einfach.
• Verwendung von forEach mit asynchronen Rückrufen. Es wird nicht gewartet. Verwenden Sie for...of oder Promise.all mit map, wie in unserem Leitfaden zu JavaScript-Array-Methoden gezeigt.
• Ich denke, ein Versprechen kann widerrufen werden. Es kann nicht von alleine erfolgen. Für Anfragen verwenden Sie AbortController.

Fazit

Versprechen basieren auf ein paar Regeln: Ein Versprechen wird einmal erfüllt, then gibt ein neues Versprechen zurück und Fehler wandern die Kette entlang, bis sie von etwas erfasst werden. Sobald sich diese Regeln natürlich anfühlen, hören async und await auf, magisch zu sein. Um dies zu üben, schreiben Sie eine Callback-basierte Funktion mithilfe von Versprechen neu, rufen Sie dann zwei Endpunkte mit Promise.all ab und behandeln Sie einen Fehler ordnungsgemäß.

Häufige Fragen

Lerne weiter