JavaScript——异步进阶

🌈本期介绍

JS 的特色就是异步编程，所有有很多关于异步的考点，本章都会讲解。如 event loop、promise、async-await、微任务和宏任务。学不会这些，就不算是精通 JS。

主要内容

• event loop 执行过程
• Promise 全面使用
• async await 全面使用
• 微任务和宏任务关键字
• Promise
• async await
• event loop
• 微任务和宏任务

什么是event loop？

event loop，也叫事件循环/事件轮询，JS是单线程运行的，从前到后，一行一行执行，如果某一行执行报错，则停止下面的代码执行，先把同步代码执行完，再执行异步，异步要基于回调来实现，event loop 就是异步回调的实现原理。

event loop 执行过程

1. 同步代码，一行一行放在 Call Stack 执行
2. 遇到异步，会先“记录”下，等待时机（定时，网络请求等）
3. 时机到了，就会移动到 Callback Queue
4. 如果 Call Stack 为空（即异步代码执行完）Event loop 开始工作
5. 轮训查找 Callback Queue，如有则移动到 Call Stack 执行
6. 然后继续轮询查找（永动机一样）

图示

在这里插入图片描述

图示代码执行过程：

1. 将 console.log("Hi") 推入调用栈，调用栈会执行代码
2. 执行代码，控制台打印“Hi”，调用栈清空
3. 执行 setTimeout，setTimeout由浏览器定义，不是ES6的内容；将定时器放到Web APIs中，到时间后将回调函数放到回调函数队列中
4. 执行完了setTimeout， 清空调用栈
5. console.log("Bye")进入调用栈，执行，调用栈清空
6. 同步代码被执行完,，回调栈空，浏览器内核启动时间循环机制
7. 五秒之后，定时器将cb1推到回调函数队列中
8. 事件循环将cb1放入调用栈

Promise有哪三种状态

promise 有三种状态，分别是：pending（初始化状态）、resolved（成功状态）、rejected（失败状态）

pending ->resolved 或 pending->rejected

变化不可逆

状态的表现

pending状态，不会触发then和catch

resolved状态，会触发后续的then回调函数

rejected状态，会触发后续的catch回调函数

reslove只会触发then的回调，不会触发catch

reject只会触发catch的回调，不会触发then

Promise的then和catch如何影响状态的变化

then正常返回resolved，里面有报错则返回rejected

catch正常返回resolved，里面有报错则返回rejected

在这里插入图片描述

在这里插入图片描述

async/await介绍

解决异步回调callback hell（回调地狱），Promise then catch 链式调用，但也是基于回调函数，async/await是用同步语法编写异步代码，是同步语法，彻底消灭回调函数，是异步写法的最佳解决方式，是消灭异步回调的终极武器。

注意：async/await和promise不冲突。

await相当于Promise的then

try...catch可捕获日常，代替了Promise的catch

写法一：

！（async function(）{

//同步的语法

const img1 = await loadImg(src1)//await 必须用async函数包裹

cosole.log(img1.height,img.width)

const img2 = await loadImg(src2)

cosnole.log(img.height,img2.width)

}) ( )

写法二：

async function loadImg1() {

const img1 = await loadImg(src1)

return img1

）

什么是宏任务和微任务

宏任务和微任务是event Loop中的两种任务，分别处在两种任务队列中。微任务是ES6语法规定的，宏任务是浏览器规定的。

宏任务

setTimeout，setInterval, Ajax, DOM事件；

微任务

Promise async/await

微任务执行时机比宏任务要早

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！