async/await执行顺序面试题

最新推荐文章于 2025-05-31 14:44:34 发布

Carol小朋友

最新推荐文章于 2025-05-31 14:44:34 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/lixinyi0622/article/details/87308047

JavaScript 专栏收录该内容

31 篇文章

订阅专栏

本文通过一道面试题解析了async/await的执行顺序。首先，主代码块开始执行，接着遇到异步操作，将其放入宏任务队列。然后依次执行console.log()，并解析Promise。当遇到await时，它会暂停async函数的执行，将后续代码放入微任务队列。微任务队列清空后，继续执行宏任务中的剩余部分，最终输出完整的顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

async function async1 () {
  console.log('async1 start')
  await async2();
  console.log('async1 end')
}
 
async function async2 () {
  console.log('async2')
}
 
console.log('script start')
 
setTimeout(function () {
  console.log('setTimeout')
}, 0)
 
async1();
 
new Promise (function (resolve) {
  console.log('promise1')
  resolve();
}).then (function () {
  console.log('promise2')
})
 
console.log('script end')

结果：

script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout

解析：
先执行主代码块，所以第一行打印script start

setTimeout()是另一个宏任务，所以先放在宏任务队列。

然后执行async1，async1里先打印async1 start
执行await async2 , 先执行async2，打印async2, 返回promise对象。await会阻塞async1后面的代码执行，所以先跳出来继续执行后面的代码。

然后执行new Promise 打印promise1
把then里面的函数加入微任务队列

打印script end
到这里第一个宏任务执行完毕，开始执行微任务then，打印promise2。

then执行完后，await才算是执行结束了，后面的代码不再被阻塞，所以打印async1 end
这时候继续执行第二个宏任务setTimeout，打印setTimeout