javascript - Chaining .then() calls in ES6 promises - Stack Overflow

admin管理员组

文章数量:1290980

I thought it was supposed to be possible to chain the .then() method when using ES6 Promises. In other words I thought that when a promise is resolved the value passed to the resolve function should be passed to any chained then handlers. If this is so how e value es back undefined in the chained then handler below?

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
  });

I thought it was supposed to be possible to chain the .then() method when using ES6 Promises. In other words I thought that when a promise is resolved the value passed to the resolve function should be passed to any chained then handlers. If this is so how e value es back undefined in the chained then handler below?

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
  });

• javascript
• es6-promise

Share Improve this question Follow asked Jan 9, 2017 at 20:20 david_i_smithdavid_i_smith 22833 silver badges1212 bronze badges 1

• You're not returning anything for the chained .then() to use as the value. – Jes Commented Jan 9, 2017 at 20:24

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

Each then() can return a value that will be used as the resolved value for the next then() call. In your first then(), you don't return anything, hence value being undefined in the next callback. Return value in the first one to make it available in the second.

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
  });

You have to return it inside a promise to pass it along. Or create a new promise that resolves with it.

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

Or

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

.then always returns a Promise that resolves to the value returned in the function callback. Since you return nothing in the first call to .then, undefined bees the resolved value of the Promise returned.

In other words, if you want to resolve true in the second call to .then, you'll have to return it in the first, like so,

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
  });

You can refer to MDN's documentation on method chaining for ES2015 promises if you need further information.

本文标签： javascriptChaining then() calls in ES6 promisesStack Overflow