.then 方法中链接承诺与值之间的区别？

Question

for a while, I thought the only way to chain .then() statements was to return a promise from the .then method. eg:

    asyncFunc()
       .then(res => asyncFunc2()) // returns a promise
       .then(res => doSmth())

But now I figured out that you can actually also return a plain old value from the .then function and it also works:

    const build = () => new Promise((resolve, reject) => {
        setTimeout(() => {
        resolve("Hallo")
      }, 100)
    })
    
    build()
        .then(res => {
        console.log(res);
        return res + " I'm";
      })
      .then(res => {
        console.log(res + " Peter");
      })

Is there a difference between the two in terms of how and when they are executed?

Answer 1

Each .then() method call returns a promise, if the return value of the callback function is also a promise, then the promise returned by the .then() method call gets resolved to that promise, meaning its fate will now depend on what happens to the promise returned by the callback function. It will settle when the promise returned by the callback function settles.

On the other hand, if you return a non-promise value, then that value is implicitly wrapped in a promise and passed to the next .then() method call, if there's any. If you don't return anything from the callback function, the promise returned by the .then() method will resolve with the value of undefined .

In first code example, as you are returning asyncFunc2() from the callback function of first .then() method, the promise returned by it will get resolved to the promise returned by asyncFunc2() .

In the second code example, res + " I'm" will be implicitly wrapped in a promise and then passed to second then() method.