Diethen()-Methode vonPromise Instanzen nimmt bis zu zwei Argumente an: Callback-Funktionen für die erfüllten und abgelehnten Fälle desPromise. Sie speichert die Callbacks innerhalb des Promises, auf dem sie aufgerufen wird, und gibt sofort ein weiteresPromise-Objekt zurück, das Ihnen ermöglicht, Aufrufe an andere Promise-Methoden zuverkette.

Probieren Sie es aus

const promise1 = new Promise((resolve, reject) => {  resolve("Success!");});promise1.then((value) => {  console.log(value);  // Expected output: "Success!"});

Syntax

then(onFulfilled)then(onFulfilled, onRejected)

Parameter

onFulfilled

Eine Funktion, die asynchron ausgeführt wird, wenn dieses Promise erfüllt wird. Der Rückgabewert dieser Funktion wird zum Erfüllungswert des vonthen() zurückgegebenen Promises. Die Funktion wird mit den folgenden Argumenten aufgerufen:

value

Der Wert, mit dem das Promise erfüllt wurde.

Wenn es keine Funktion ist, wird sie intern durch eineIdentitäts-Funktion ((x) => x) ersetzt, die einfach den Erfüllungswert weitergibt.

onRejectedOptional

Eine Funktion, die asynchron ausgeführt wird, wenn dieses Promise abgelehnt wird. Der Rückgabewert dieser Funktion wird zum Erfüllungswert des vonthen() zurückgegebenen Promises. Die Funktion wird mit den folgenden Argumenten aufgerufen:

reason

Der Wert, mit dem das Promise abgelehnt wurde.

Wenn es keine Funktion ist, wird sie intern durch eineThrower-Funktion ((x) => { throw x; }) ersetzt, die den erhaltenen Ablehnungsgrund auslöst.

Rückgabewert

Gibt sofort ein neuesPromise zurück. Dieses zurückgegebene Promise ist immer ausstehend, wenn es zurückgegeben wird, unabhängig vom Status des aktuellen Promises.

Einer deronFulfilled- undonRejected-Handler wird ausgeführt, um die Erfüllung oder Ablehnung des aktuellen Promises zu verarbeiten. Der Aufruf erfolgt immer asynchron, auch wenn das aktuelle Promise bereits gelöst ist. Das Verhalten des vonthen() zurückgegebenen Promises (im Folgenden alsp bezeichnet) hängt vom Ausführungsergebnis des Handlers ab und folgt einem bestimmten Regelwerk. Wenn die Handler-Funktion:

• einen Wert zurückgibt:p wird mit dem zurückgegebenen Wert als Eigenwert erfüllt.
• nichts zurückgibt:p wird mitundefined als Eigenwert erfüllt.
• einen Fehler auslöst:p wird mit dem ausgelösten Fehler als Eigenwert abgelehnt.
• ein bereits erfülltes Promise zurückgibt:p wird mit dem Wert dieses Promises als Eigenwert erfüllt.
• ein bereits abgelehntes Promise zurückgibt:p wird mit dem Wert dieses Promises als Eigenwert abgelehnt.
• ein weiteres ausstehendes Promise zurückgibt:p ist ausstehend und wird mit dem Wert dieses Promises als Eigenwert erfüllt/abgelehnt, sobald dieses Promise erfüllt/abgelehnt wird.

Beschreibung

Diethen()-Methode plant die Callback-Funktionen für das endgültige Abschließen eines Promises — entweder Erfüllung oder Ablehnung. Sie ist die primitive Methode von Promises: dasthenable-Protokoll erwartet, dass alle Promise-ähnlichen Objekte einethen()-Methode bereitstellen, und die Methodencatch() undfinally() funktionieren beide, indem sie diethen()-Methode des Objekts aufrufen.

Für weitere Informationen über denonRejected-Handler, siehe diecatch()-Referenz.

then() gibt ein neues Promise-Objekt zurück, verändert jedoch das Promise-Objekt, auf dem es aufgerufen wird, indem es die Handler zu einer internen Liste hinzufügt. Daher wird der Handler vom ursprünglichen Promise beibehalten und seine Lebensdauer ist mindestens so lang wie die des ursprünglichen Promises. Zum Beispiel wird im folgenden Beispiel letztendlich der Speicher ausgehen, auch wenn das zurückgegebene Promise nicht beibehalten wird:

const pendingPromise = new Promise(() => {});while (true) {  pendingPromise.then(doSomething);}

Wenn Sie die Methodethen() zweimal auf demselben Promise-Objekt aufrufen (anstatt zu verketten), dann hat dieses Promise-Objekt zwei Paare von Abschluss-Handlern. Alle an dasselbe Promise-Objekt angehängten Handler werden immer in der Reihenfolge aufgerufen, in der sie hinzugefügt wurden. Zudem beginnen die beiden Versprechen, die durch jeden Aufruf vonthen() zurückgegeben werden, separate Ketten und warten nicht auf den Abschluss des jeweils anderen.

Thenable-Objekte, die entlang derthen()-Kette entstehen, werden immeraufgelöst — deronFulfilled-Handler erhält niemals ein thenable-Objekt und jedes thenable, das von einem der Handler zurückgegeben wird, wird immer aufgelöst, bevor es an den nächsten Handler weitergegeben wird. Dies liegt daran, dass beim Erstellen des neuen Promises die vomexecutor übergebenenresolve- undreject-Funktionen gespeichert werden, und wenn das aktuelle Promise abgeschlossen ist, wird die entsprechende Funktion mit dem Erfüllungswert oder Ablehnungsgrund aufgerufen. Die Auflösungslogik stammt von derresolve-Funktion, die vomPromise()-Konstruktor übergeben wird.

then() unterstützt das Subclassing, was bedeutet, dass es auf Instanzen von Unterklassen vonPromise aufgerufen werden kann und das Ergebnis ein Promise des Unterklassentyps ist. Sie können den Rückgabewerttyp durch die[Symbol.species]-Eigenschaft anpassen.

Beispiele

Verwendung der then()-Methode

const p1 = new Promise((resolve, reject) => {  resolve("Success!");  // or  // reject(new Error("Error!"));});p1.then(  (value) => {    console.log(value); // Success!  },  (reason) => {    console.error(reason); // Error!  },);

Eine Nicht-Funktion als einen der Parameter verwenden

Promise.resolve(1).then(2).then(console.log); // 1Promise.reject(new Error("failed")).then(2, 2).then(console.log, console.log); // Error: failed

Verkettung

Diethen-Methode gibt ein neuesPromise zurück, das eine Methode zum Verkettung erlaubt.

Wenn die als Handler anthen übergebene Funktion einPromise zurückgibt, wird ein äquivalentesPromise an das nachfolgendethen in der Methodenkette exponiert. Der folgende Code-Schnipsel simuliert asynchronen Code mit der FunktionsetTimeout.

Promise.resolve("foo")  // 1. Receive "foo", concatenate "bar" to it, and resolve that to the next then  .then(    (string) =>      new Promise((resolve, reject) => {        setTimeout(() => {          string += "bar";          resolve(string);        }, 1);      }),  )  // 2. receive "foobar", register a callback function to work on that string  // and print it to the console, but not before returning the unworked on  // string to the next then  .then((string) => {    setTimeout(() => {      string += "baz";      console.log(string); // foobarbaz    }, 1);    return string;  })  // 3. print helpful messages about how the code in this section will be run  // before the string is actually processed by the mocked asynchronous code in the  // previous then block.  .then((string) => {    console.log(      "Last Then: oops... didn't bother to instantiate and return a promise in the prior then so the sequence may be a bit surprising",    );    // Note that `string` will not have the 'baz' bit of it at this point. This    // is because we mocked that to happen asynchronously with a setTimeout function    console.log(string); // foobar  });// Logs, in order:// Last Then: oops... didn't bother to instantiate and return a promise in the prior then so the sequence may be a bit surprising// foobar// foobarbaz

Der vonthen() zurückgegebene Wert wird auf dieselbe Weise aufgelöst wiePromise.resolve(). Das bedeutet, dassthenable Objekte unterstützt werden und wenn der Rückgabewert kein Promise ist, wird er implizit in einPromise eingeschlossen und dann aufgelöst.

const p2 = new Promise((resolve, reject) => {  resolve(1);});p2.then((value) => {  console.log(value); // 1  return value + 1;}).then((value) => {  console.log(value, "- A synchronous value works"); // 2 - A synchronous value works});p2.then((value) => {  console.log(value); // 1});

Einthen-Aufruf gibt ein Promise zurück, das schließlich abgelehnt wird, wenn die Funktion einen Fehler auslöst oder ein abgelehntes Promise zurückgibt.

Promise.resolve()  .then(() => {    // Makes .then() return a rejected promise    throw new Error("Oh no!");  })  .then(    () => {      console.log("Not called.");    },    (error) => {      console.error(`onRejected function called: ${error.message}`);    },  );

In der Praxis ist es oft wünschenswerter, abgelehnte Promises mitcatch() zu erfassen, anstatt die Zwei-Fall-Syntax vonthen() zu verwenden, wie unten gezeigt.

Promise.resolve()  .then(() => {    // Makes .then() return a rejected promise    throw new Error("Oh no!");  })  .catch((error) => {    console.error(`onRejected function called: ${error.message}`);  })  .then(() => {    console.log("I am always called even if the prior then's promise rejects");  });

In allen anderen Fällen wird das zurückgegebene Promise schließlich erfüllt. Im folgenden Beispiel gibt das erstethen()42 zurück, eingeschlossen in ein erfülltes Promise, obwohl das vorherige Promise in der Kette abgelehnt wurde.

Promise.reject(new Error("Oh no!"))  .then(    () => 99,    () => 42,  ) // onRejected returns 42 which is wrapped in a fulfilled Promise  .then((solution) => console.log(`Resolved with ${solution}`)); // Fulfilled with 42

WennonFulfilled ein Promise zurückgibt, wird der Rückgabewert vonthen je nach dem endgültigen Status dieses Promises erfüllt/abgelehnt.

function resolveLater(resolve, reject) {  setTimeout(() => {    resolve(10);  }, 1000);}function rejectLater(resolve, reject) {  setTimeout(() => {    reject(new Error("Error"));  }, 1000);}const p1 = Promise.resolve("foo");// Return promise here, that will be resolved to 10 after 1 secondconst p2 = p1.then(() => new Promise(resolveLater));p2.then(  (v) => {    console.log("resolved", v); // "resolved", 10  },  (e) => {    // not called    console.error("rejected", e);  },);// Return promise here, that will be rejected with 'Error' after 1 secondconst p3 = p1.then(() => new Promise(rejectLater));p3.then(  (v) => {    // not called    console.log("resolved", v);  },  (e) => {    console.error("rejected", e); // "rejected", 'Error'  },);

Sie können Verkettungen verwenden, um eine Funktion mit einer auf Promise-basierenden API über einer anderen ähnlichen Funktion zu implementieren.

function fetchCurrentData() {  // The fetch() API returns a Promise. This function  // exposes a similar API, except the fulfillment  // value of this function's Promise has had more  // work done on it.  return fetch("current-data.json").then((response) => {    if (response.headers.get("content-type") !== "application/json") {      throw new TypeError();    }    const j = response.json();    // maybe do something with j    // fulfillment value given to user of    // fetchCurrentData().then()    return j;  });}

Asynchronität von then()

Das folgende Beispiel zeigt die Asynchronität derthen-Methode.

// Using a resolved promise 'resolvedProm' for example,// the function call 'resolvedProm.then(...)' returns a new promise immediately,// but its handler '(value) => {...}' will get called asynchronously as demonstrated by the console.logs.// the new promise is assigned to 'thenProm',// and thenProm will be resolved with the value returned by handlerconst resolvedProm = Promise.resolve(33);console.log(resolvedProm);const thenProm = resolvedProm.then((value) => {  console.log(    `this gets called after the end of the main stack. the value received is: ${value}, the value returned is: ${      value + 1    }`,  );  return value + 1;});console.log(thenProm);// Using setTimeout, we can postpone the execution of a function to the moment the stack is emptysetTimeout(() => {  console.log(thenProm);});// Logs, in order:// Promise {[[PromiseStatus]]: "resolved", [[PromiseResult]]: 33}// Promise {[[PromiseStatus]]: "pending", [[PromiseResult]]: undefined}// "this gets called after the end of the main stack. the value received is: 33, the value returned is: 34"// Promise {[[PromiseStatus]]: "resolved", [[PromiseResult]]: 34}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Promise
• Promise.prototype.catch()