Warum gibt .then(), das mit einem Versprechen verkettet ist, Undefiniert zurück?

Warum .then() Chained to a Promise Undefiniert zurückgibt

Bedenken Sie den folgenden Codeausschnitt:

<code class="js">function doStuff(n) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(n * 10);
    }, Math.floor(Math.random() * 1000));
  })
  .then((result) => {
    if (result > 100) {
      console.log(`${result} is greater than 100`);
    } else {
      console.log(`${result} is not greater than 100`);
    }
  });
}

doStuff(9)
.then((data) => {
  console.log(data); // undefined, why?
});</code>

Warum ist der Wert der Daten im zweiten .then()-Rückruf undefiniert?

Antwort:

Wenn Sie einen .then()-Rückruf mit einem Promise verketten, wird er gibt ein neues Promise zurück, das in den Rückgabewert des Rückrufs aufgelöst wird. Im bereitgestellten Code wird jedoch vom ersten .then() kein Wert oder Promise zurückgegeben.

Lösung:

Um das Problem zu beheben, müssen Sie zurückkehren einen Wert oder rufen Sie eine andere Funktion auf, die einen Wert oder ein Versprechen vom ersten .then() zurückgibt. Hier ist eine aktualisierte Version des Codes:

<code class="js">function doStuff(n) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(n * 10);
    }, Math.floor(Math.random() * 1000));
  })
  .then((result) => {
    if (result > 100) {
      console.log(`${result} is greater than 100`);
    } else {
      console.log(`${result} is not greater than 100`);
    }

    // Return `result` here to avoid undefined at chained `.then()`.
    return result;
  });
}

doStuff(9)
.then((data) => {
  console.log(`data is: ${data}`); // data is not undefined
});</code>

In diesem aktualisierten Code gibt die erste .then() den Wert des Ergebnisses zurück (n multipliziert mit 10), was sicherstellt, dass die zweite .then() empfängt ein definierter Wert als Argument.

Das obige ist der detaillierte Inhalt vonWarum gibt .then(), das mit einem Versprechen verkettet ist, Undefiniert zurück?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!