AJAX:宏任务与微任务

简介: AJAX:宏任务与微任务

异步任务划分为了


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


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


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

d91537cd9ac241c7842dd0c3a701bf7e.png

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


事件循环模型

/**
 * 目标:阅读并回答打印的执行顺序
*/
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的调用栈再次空闲,它会保持监视任务队列情况。


9f18498b0f82417da1d7b5a67b4750b0.png


参考:AJAX-Day04-09.微任务与宏任务_哔哩哔哩_bilibili


相关文章
|
9月前
|
XML 前端开发 JavaScript
ajax原理是什么?如何实现?
ajax原理是什么?如何实现?
115 0
|
XML 开发框架 前端开发
Ajax之二 Ajax基础(下)
Ajax之二 Ajax基础(下)
73 0
|
XML 前端开发 JavaScript
Ajax之二 Ajax基础(上)
Ajax之二 Ajax基础
42 0
|
前端开发
Ajax的原生写法
Ajax的原生写法
|
前端开发 JavaScript
AJAX: 事件循环(举例细论)
AJAX: 事件循环(举例细论)
66 1
|
前端开发 JavaScript
uniapp中简单封装ajax
uniapp中简单封装ajax
246 0
|
前端开发 安全
|
XML JSON 缓存
前端必看之AJAX功能原理详解篇
jax 这个概念是由 Jesse James Garrett 在 2005 年发明的。它本身不是单一技术,是一串 技术的集合,主要有: 1.JavaScript,通过用户或其他与浏览器相关事件捕获交互行为; 2.XMLHttpRequest 对象,通过这个对象可以在不中断其它浏览器任务的情况下向服务 器发送请求; 3.服务器上的文件,以 XML、HTML 或 JSON 格式保存文本数据; 4.其它 JavaScript,解释来自服务器的数据(比如 PHP 从 MySQL 获取的数据)并将其 呈现到页面上。
200 0
前端必看之AJAX功能原理详解篇
|
移动开发 前端开发 JavaScript
封装自己的Ajax函数
封装自己的Ajax函数
101 0
封装自己的Ajax函数
|
XML 前端开发 JavaScript
简述Ajax,以及使用原生js书写Ajax案例
简述Ajax,以及使用原生js书写Ajax案例
170 0