在 ES6 Promise 中链接 .then() 调用答案

【问题标题】：Chaining .then() calls in ES6 promises在 ES6 Promise 中链接 .then() 调用
【发布时间】：2017-05-24 04:48:08
【问题描述】：

我认为在使用 ES6 Promises 时应该可以链接 .then() 方法。换句话说，我认为当一个 promise 被解析时，传递给 resolve 函数的值应该传递给任何链接的 then 处理程序。如果是这样，为什么 value 在下面的链式 then 处理程序中返回未定义？

function createPromise() {
  return new Promise((resolve) => {
    resolve(true);
  });
}

createPromise()
  .then((value) => {
    console.log(value); // expected: true, actual: true
  })
  .then((value) => {
    console.log(value); // expected: true, actual: undefined
  });

【问题讨论】：

您没有返回任何链接的.then() 用作值。

标签： javascript es6-promise

【解决方案1】：

.then 总是返回一个 Promise，它解析为函数回调中返回的值。由于您在第一次调用 .then 时没有返回任何内容，因此 undefined 成为返回的 Promise 的解析值。

换句话说，如果你想在第二次调用.then时解析true，你必须在第一次调用时返回它，像这样，

createPromise() // returns a Promise
  .then(function (value) {
    console.log(value); // => true
    return value; // now this will return a Promise that resolves the value `true`
  }).then(function (value) {
    console.log(value) // => true
  });

如果您需要更多信息，可以参考MDN's documentation on method chaining 了解 ES2015 承诺。

【讨论】：

【解决方案2】：

每个then() 都可以返回一个值，该值将用作下一次then() 调用的解析值。在您的第一个then() 中，您不返回任何内容，因此value 在下一个回调中未定义。在第一个中返回 value 以使其在第二个中可用。

function createPromise() {
  return new Promise((resolve) => {
    resolve(true);
  });
}

createPromise()
  .then((value) => {
    console.log(value); // expected: true, actual: true
    return value;
  })
  .then((value) => {
    console.log(value); // expected: true, actual: true
  });

【讨论】：

【解决方案3】：

您必须在承诺中返回它才能传递它。或者创建一个新的 Promise 来解决它。

createPromise()
.then((value) => {
    return value;
})
.then((value) => {
    console.log(value);
});

或者

createPromise()
.then((value) => {
    return new Promise.resolve(value);
})
.then((value) => {
    console.log(value);
});

【讨论】：