借一道面试题讲讲promise、async和await在事件循环中的执行顺序

最新推荐文章于 2025-02-23 10:39:05 发布

原创

最新推荐文章于 2025-02-23 10:39:05 发布 · 914 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Event Loop

本文通过一道面试题深入讲解JavaScript中的事件循环机制，包括同步任务、异步任务、宏任务和微任务的执行顺序。具体执行顺序为：同步任务执行完毕后，先执行微任务，再执行宏任务。在Node.js环境中，由于V8引擎的更新策略，可能与Chrome有所差异。

题目如下所示：

async function a1 () {
    console.log('a1 start')
    await a2()
    console.log('a1 end')
}
async function a2 () {
    console.log('a2')
}
console.log('script start')
setTimeout(() => {
    console.log('setTimeout')
}, 0)
Promise.resolve().then(() => {
    console.log('promise1')
})
a1()
let promise2 = new Promise((resolve) => {
    resolve('promise2.then')
    console.log('promise2')
})
promise2.then((res) => {
    console.log(res)
    Promise.resolve().then(() => {
        console.log('promise3')
    })
})
console.log('script end')






//在浏览器中输出为：
 script start
 a1 start
 a2
 promise2
 script end
 promise1
 a1 end
 promise2.then
 promise3
 setTimeout

事件循环

js的运行机制是同步任务都在主线程上运行，形成一个栈，而异步任务就会放在任务队列中，等主线程的任务全部执行完之后，就会去任务队列里面看看是否存在任务需要执行，其中在任务队列中还分为宏任务和微任务，需注意的是微任务是优先于宏任务的，每次都会先执行微任务，所以在每次执行一次宏任务之后，都会去看看有没有微任务需要执行，如果有，那么就是先执行微任务，总结以上的一段话就是：