AJAX：宏任务与微任务-Toy模板网

这篇具有很好参考价值的文章主要介绍了AJAX：宏任务与微任务。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

异步任务划分为了

宏任务：由浏览器环境执行的异步代码

微任务：由 JS 引擎环境执行的异步代码

宏任务和微任务具体划分：

AJAX：宏任务与微任务,Ajax,ajax,okhttp,前端

左边表格是宏任务，右边是微任务

事件循环模型

/**
 * 目标：阅读并回答打印的执行顺序
*/
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：宏任务与微任务,Ajax,ajax,okhttp,前端