javascript - 了解什么触发了 JavaScript Promise 链的下一个 .then()

Question

我有一个看起来像这样的 promise 链。

fistAsyncFunction()
    .then(() => {
        secondAsyncFunction()
    })
    .then(() => {
        thirdAsyncFunction()
    })

我注意到第三个异步函数在第二个异步函数完成之前启动，但将其更改为此后，它按照我想要的方式工作。

fistAsyncFunction()
    .then(() => {
        return secondAsyncFunction()
    })
    .then(() => {
        thirdAsyncFunction()
    })

看起来，即使第二个异步函数没有返回任何内容，程序也会等待它返回undefined，然后再进入下一个 promise 。这是实际发生的事情吗？如果没有，那么幕后发生了什么促使 javascript 开始执行下一个 Promise？

Answer 1

这样想

fistAsyncFunction()
    .then(() => {
        secondAsyncFunction()
        return undefined
    })
    .then((iAmUndefined) => {
        thirdAsyncFunction()
        return undefined
    })

^ 这是您的第一个具有显式返回的示例。

It seems like even though the second async function didn't return anything, the program waited for it to return undefined before moving onto the next promise.

所以你在这一点上是对的。第二个异步函数不返回任何内容；那是对的。但是，程序不会等待 secondAsyncFunction() 返回 undefined。此外，它根本不等待 secondAsyncFunction()。相反，你的程序会说

Okay secondAsyncFunction I will now call you and let you run away; I will not wait for you. Instead I'm just going to return undefined and move on. Hello thirdAsyncFunction!

您正确地注意到，您的 thirdAsyncFunction 在 secondAsyncFunction 返回之前启动。

接下来，您对代码进行了修改以实现预期的行为

fistAsyncFunction()
    .then(() => {
        return secondAsyncFunction()
    })
    .then(resultOfSecondAsyncFunction => {
        thirdAsyncFunction()
        return undefined
    })

^这是您的第二个具有显式返回的示例

您的程序现在正在按您希望的方式工作，因为通过返回 secondAsyncFunction()，您现在指示您的程序等待该函数的返回。

what is going on under the hood that prompts javascript to start executing the next promise?

在底层，有一个特殊的函数resolve，在Promise构造函数中使用。当调用前一个 Promise 的 resolve 函数时，下一个 Promise 将开始执行。当然，两个 Promise 必须通过 .then 连接在一起。