计时器

1
2
3
setTimeout(()=>{
代码块
},等待时间)

无论等待时间多短,异步任务都不会阻塞接下来的代码执行,即使是0也会在同步任务执行完后再执行(宏任务,执行顺序在同步代码、微任务之后)

pVlDibq.png

Promise

本身是个类,实例化传入函数执行异步任务,成功执行调用resolve(),失败调用reject(),两个方法都可以接受传入各种参数来传递成功/失败信息

成功(即resolve()被执行)后会自动执行该Promise对象的then()回调,then()方法本身返回一个新Promise对象,可以接着往下then,失败则调用catch()回调。

除了resolve()reject()外还有个finally(),无论成败都会在结束之后执行

pVlDAaV.png

Async

先声明要异步的函数,把传入耗时任务的Promise对象作为返回值(如果任务本身是异步任务(fetchio等)就直接传入,否则要手动用setTimeout等调整队列)

async修饰的函数简化后续操作,在async修饰的函数内使用await Promise对象来时async函数内余下任务等待promise的任务完成(但不会阻塞同步代码

pVlDE5T.png

参考资料

20分钟学会ES6之异步处理 Promise&Async 前端新手最头疼的技能之一

web前端知识:js中的微任务和宏任务js中什么是微任务和宏任务 在 JavaScript 引擎中,任务分为两种类型:微 - 掘金

使用 promise - JavaScript | MDN Web 中文网