文章目录
- 同步代码和异步代码
- 回调函数地狱
- 解决回调函数地狱
- Promise-链式调用
- async函数和await
- async函数和await-捕获错误
- 事件循环
- 宏任务与微任务
- Promise.all静态方法
同步代码和异步代码
- 同步代码:逐步执行,需原地等待结果后,才继续向下执行
- 异步代码:调用后耗时,不阻塞代码继续执行(不必原地等待),在将来完成后触发一个回调函数
回调函数地狱
概念:在回调函数中嵌套回调函数,一直嵌套下去就形成了回调函数地狱
缺点:可读性差,异常无法捕捉,耦合性严重,牵一发而动全身
解决回调函数地狱
Promise-链式调用
概念:依靠then()方法会返回一个新生成的Promise对象特性,继续串联下一环任务,直到结束
细节:then()回调函数中的返回值,会影响新生成的Promise对象最终状态和结果
好处:通过链式调用,解决回调函数嵌套问题
async函数和await
async函数是AsyncFunction构造函数的实例,并且允许使用await关键字。aysnc和await关键字让我们用一种更简洁的方式写出基于Promise的异步代码,而无需刻意地链式调用Promise。
概念:在async函数内,使用await关键字取代then函数,等待获取Promise对象成功状态的结果值
async函数和await-捕获错误
使用:try...catch
标记要尝试的语句块,并指定一个出现异常时抛出的响应。
语法:
try {
// 要执行的代码
} catch (error) {
// error接收的是错误信息
// try里代码,如果有错误,直接进入这里执行
}
事件循环
概念:JavaScript有一个基于事件循环的并发模型,事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。
原因:JavaScript单线程,为了让耗时代码不阻塞其他代码运行,设计了事件循环模型。
定义:执行代码和收集异步任务的模型,在调用栈空闲,反复调用任务队列里回调函数的执行任务,就叫事件循环。
执行过程:
- 执行异步代码,遇到异步代码交给宿主浏览器环境执行
- 异步拥有结果后,把回调函数放入任务队列排队
- 当调用栈空闲后,反复调用任务队列里的回调函数
宏任务与微任务
异步任务分为:
- 宏任务:由浏览器环境执行的异步代码
- 微任务:由JavaScript引擎环境执行的异步代码
任务(代码) | 执行所在环境 |
---|---|
JavaScript脚本执行事件(script) | 浏览器 |
setTimeout/setInterval | 浏览器 |
AJAX请求完成事件 | 浏览器 |
用户交互事件 | 浏览器 |
Promise对象.then() | JavaScript引擎 |
注意:Promise本身是同步的,而then和catch回调函数是异步的
执行过程:
- 执行第一个script脚本事件宏代码,里面同步代码
- 遇到宏任务/微任务交给宿主环境,有结果回调函数进入对应队列
- 当执行栈空闲时,清空微任务队列,再执行下一个宏任务,从1再来
Promise.all静态方法
概念:合并多个Promise对象,等待所有同时成功完成(或某个失败),做后续逻辑
语法:
const p = Promise.all([Promise对象,Promise对象,...])
p.then(result => {
// result结果:[Promise对象成功结果,Promise对象成功结果,...]
}).catch(error =>{
// 第一个失败的Promise对象抛出的异常
})