异步任务划分为了
宏任务:由浏览器环境执行的异步代码
微任务:由 JS 引擎环境执行的异步代码
宏任务和微任务具体划分:
左边表格是宏任务,右边是微任务
事件循环模型
/*** 目标:阅读并回答打印的执行顺序
*/
console.log(1)
setTimeout(() => {console.log(2)
}, 0)
const p = new Promise((resolve, reject) => {resolve(3)
})
p.then(res => {console.log(res)
})
console.log(4)
执行过程:
1-JS引擎把console.log(1)
放入调用栈中,执行后弹出
2-JS引擎发现setTimeout(…, 0)
是异步代码,且是宏任务,于是将它放入宿主环境(浏览器)中,执行setTimeout(…, 0)
,完成后放入宏任务队列中
3-JS引擎把new Promise()
放入调用栈中,执行其中的console.log(3)
,然后执行其中的resolve(4)
, 意味着当前的Promise对象为已兑现状态,以上完成后new Promise()
从栈弹出
4-JS引擎发现p.then()
是同步代码,但是里面的回调函数是异步代码,而且p.then()
的回调函数是微任务,所以把它放入微任务队列中排队。执行后p.then()
出栈。
5-JS引擎把console.log(5)
放入调用栈中,执行后弹出
6-此时,JS的调用栈空闲,调用任务队列中的回调函数,先调用微任务中的回调函数 console.log(result)
,因为微任务更接近JS引擎,推入调用栈,执行后出栈。然后调用宏任务中的console.log(2)
,推入调用栈,执行完后出栈。此时,JS的调用栈再次空闲,它会保持监视任务队列情况。
参考:AJAX-Day04-09.微任务与宏任务_哔哩哔哩_bilibili