VUE 开发——AJAX学习（三）

一、async函数和await

async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用Promise

async写在函数声明的前面；在async函数内，使用await关键字，获取Promise对象“成功状态”结果值

 <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语句：标记要尝试的语句块，并指定一个出现异常时抛出的响应

<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对象，等待所有同时完成完成（或某一个失败），做后续逻辑

 

    <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>