Verwendung von Promises

Ein Promise ist ein Objekt, das den endgültigen Abschluss oder das Scheitern einer asynchronen Operation darstellt. Da die meisten Menschen Konsumenten von bereits erstellten Promises sind, erklärt dieser Leitfaden zunächst die Verwendung zurückgegebener Promises, bevor er erklärt, wie man sie erstellt.

Im Wesentlichen ist ein Promise ein zurückgegebenes Objekt, an das man Callbacks anhängt, anstatt Callbacks in eine Funktion zu übergeben. Stellen Sie sich eine Funktion createAudioFileAsync() vor, die asynchron eine Audiodatei erstellt, gegeben eine Konfigurationsdatensatz und zwei Callback-Funktionen: eine, die aufgerufen wird, wenn die Audiodatei erfolgreich erstellt wird, und eine andere, die aufgerufen wird, wenn ein Fehler auftritt.

Hier ist ein Code, der createAudioFileAsync() verwendet:

function successCallback(result) {
  console.log(`Audio file ready at URL: ${result}`);
}

function failureCallback(error) {
  console.error(`Error generating audio file: ${error}`);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

Wenn createAudioFileAsync() umgeschrieben wäre, um ein Promise zurückzugeben, würden Sie Ihre Callbacks daran anhängen:

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

Diese Konvention hat mehrere Vorteile. Wir werden jeden davon untersuchen.

Verkettung

Ein häufiges Bedürfnis ist es, zwei oder mehr asynchrone Operationen hintereinander auszuführen, wobei jede nachfolgende Operation startet, wenn die vorherige erfolgreich ist, mit dem Ergebnis aus dem vorherigen Schritt. In der Vergangenheit führte die Durchführung mehrerer asynchroner Operationen hintereinander zum klassischen Callback-Hell:

doSomething(function (result) {
  doSomethingElse(result, function (newResult) {
    doThirdThing(newResult, function (finalResult) {
      console.log(`Got the final result: ${finalResult}`);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

Mit Promises erreichen wir dies, indem wir eine Promise-Kette erstellen. Das API-Design von Promises macht dies großartig, weil die Callbacks an das zurückgegebene Promise-Objekt angehängt werden, anstatt in eine Funktion übergeben zu werden.

Hier ist das Besondere: Die Funktion then() gibt ein neues Promise zurück, das sich vom ursprünglichen unterscheidet:

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Dieses zweite Promise (promise2) repräsentiert den Abschluss nicht nur von doSomething(), sondern auch von dem an successCallback oder failureCallback übergebenen Callback — welche andere asynchrone Funktionen sein können, die ein Promise zurückgeben. Wenn dies der Fall ist, werden alle an promise2 hinzugefügten Callbacks hinter das Promise in die Warteschlange eingereiht, das von entweder successCallback oder failureCallback zurückgegeben wird.

Hinweis: Wenn Sie ein funktionierendes Beispiel verwenden möchten, können Sie die folgende Vorlage verwenden, um eine Funktion zu erstellen, die ein Promise zurückgibt:

function doSomething() {
  return new Promise((resolve) => {
    setTimeout(() => {
      // Andere Dinge, die vor dem Abschluss des Promises erledigt werden müssen
      console.log("Did something");
      // Der Erfüllungswert des Promises
      resolve("https://example.com/");
    }, 200);
  });
}

Die Implementierung wird im Abschnitt Erstellen eines Promises um eine alte Callback-API unten besprochen.