为什么async函数中两种await方式得出结果顺序不同？

代码如下，为什么 async 函数中两种 await 方式得出结果顺序不同？

function getResult(value,time) {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(value)
            resolve()
        }, time)
    })
}

(async () => {
    await getResult(1,300)
    await getResult(2,200)
})()

(async () => {
    const a = getResult(3,300)
    const b = getResult(4,200)
    await a
    await b
})()

我们从后往前看，先看最后一个执行，在 EventLoop 中：

• 会优先执行当前宏任务，结束后再执行宏任务中的微任务。
• 之后再执行下一个宏任务，依次类推。

现在来看最后一段代码：

(async () => {
    const a = getResult(3,300)
    const b = getResult(4,200)
    await a
    await b
})()

• 当前的宏任务是函数 getResult：执行 2 次
• 在函数中返回并添加微任务 Promise 到队列中，添加了 2 个
• 第一个 await 展开当前宏中的 Promise 微任务队列作为同步顺序执行
• 从第一个 Promise 中提取 setTimeout 宏任务加入队列，300 毫秒后执行
• 从第二个 Promise 中提取 setTimeout 宏任务加入队列，200 毫秒后执行
• 当前宏任务中微任务执行完毕，等待执行下一个宏任务
• 200 毫秒的宏任务优先执行输出 4，并释放第二个 await
• 由于第一个 await 还未 resolve，并且当前宏任务中没有微任务继续往下执行
• 300 毫秒的宏任务开始执行输出 3，并释放第一个 await
• 第二个 await 开始执行，当前宏任务中已没有需要展开的微任务队列，并且已 resolve
• 继续往下执行，由于上下文中既没有微任务也没有宏任务，结束执行

以上流程遵循一条原则，即：

• await 会展开当前所有已队列的异步微任务作为同步函数顺序执行

因此，再来看最后这段代码：

(async () => {
    const a = getResult(3,300)    // 添加微任务到队列
    const b = getResult(4,200)    // 添加微任务到队列
    await a    // 执行所有提交到当前 `promise` 队列，展开作为同步执行
    await b    // 再次执行，当前宏任务中已没有微任务队列
})()

当 await a 时，已将微任务全部添加到队列。

现在来看第一段有什么不一样：

• 只有当微任务 resolve 或 reject 后，才会完成整个 await

  (async () => {
      await getResult(1,300)
      await getResult(2,200)
  })()

• 先执行当前宏任务函数 getResult，添加一个 promise 微任务队列。
• await 展开当前宏任务中，微任务队列作为上下文同步执行，这里队列只有 1 个。
• 执行 promise 微任务并添加一个 setTimeout 宏任务。
• 当前宏任务中微任务执行完毕，由于还未 resolve，继续执行下一个宏任务。
• 在 setTimeout 宏任务中输出 1，并释放第一个 await。

因此，第一段和第二段执行顺序的不同，是因为：

• await 执行时，添加到当前宏任务中的 Promise 队列不同决定的。

你学废了吗？

以上关于为什么async函数中两种await方式得出结果顺序不同？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。