一、async函数和await
async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用Promise
async写在函数声明的前面;在async函数内,使用await关键字,获取Promise对象"成功状态"结果值
html
<script>
//注意:await必须用在async修饰的函数内(await会阻止"异步函数内"代码继续执行,原地等待结果)
//1.定义一个async修饰函数
async function getData() {
//2.await等待Promise对象成功的结果
const pObj = await axios({url:'http://hmajax.itheima.net/api/province'})
const pname = pObj.data.list[0]
}
getData()
</script>
捕获错误
使用try......catch语句:标记要尝试的语句块,并指定一个出现异常时抛出的响应
html
<script>
async function getData() {
//1.try包装可能产生错误的代码
try {
const pObj = await axios({url:'http://hmajax.itheima.net/api/province'})
const pname = pObj.data.list[0]
} catch(error) {
//2.接着调用catch块,接收错误信息
//dir可以看到错误信息
console.dir(error)
}
}
getData()
</script>
二、事件循环(EventLoop)
概念:事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。
定义:执行代码和收集异步任务的模型,在调用栈空闲,反复调用任务队列里回调函数的执行机制
三、宏任务与微任务
异步任务分为:
- 宏任务:由浏览器环境执行的异步代码
- 微任务:由JS引擎环境执行的异步代码
|------------------------|--------|
| 任务(代码) | 执行所在环境 |
| JS脚本执行事件(script) | 浏览器 |
| setTimeout/setInterval | 浏览器 |
| AJAX请求完成事件 | 浏览器 |
| 用户交互事件等 | 浏览器 |
| Promise对象.then() | JS引擎 |
先执行同步代码,再是微任务,最后是宏任务
四、Promise.all静态方法
概念:合并多个Promise对象,等待所有同时完成完成(或某一个失败),做后续逻辑
html
<script>
/**
* 掌握Promise的all方法作用和使用场景
*/
//1.得到Promise对象
const bjPromise = axios({url: '',params: { city: '110100'}})
const shPromise = axios({url: '',params: { city: '310100'}})
const gzPromise = axios({url: '',params: { city: '440100'}})
const szPromise = axios({url: '',params: { city: '440300'}})
//2.使用Promise.all,合并多个Promise对象
const p = Promise.all([bjPromise,shPromise,gzPromise,szPromise])
p.then(result => {
console.log(result)
}).catch(error => {
console.dir(error)
})
</script>