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 执行过程
- 同步代码，一行一行放在 Call Stack 执行
- 遇到异步，会先“记录”下，等待时机（定时，网络请求等）
- 时机到了，就会移动到 Callback Queue
- 如果 Call Stack 为空（即异步代码执行完）Event loop 开始工作
- 轮训查找 Callback Queue，如有则移动到 Call Stack 执行
- 然后继续轮询查找（永动机一样）
图示
图示代码执行过程：
- 将 console.log("Hi") 推入调用栈，调用栈会执行代码
- 执行代码，控制台打印“Hi”，调用栈清空
- 执行 setTimeout，setTimeout由浏览器定义，不是ES6的内容；将定时器放到Web APIs中，到时间后将回调函数放到回调函数队列中
- 执行完了setTimeout， 清空调用栈
- console.log("Bye")进入调用栈，执行，调用栈清空
- 同步代码被执行完,，回调栈空，浏览器内核启动时间循环机制
- 五秒之后，定时器将cb1推到回调函数队列中
- 事件循环将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腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。