Ajax之Promise链式应用、async函数和await、Promise.all静态方法

一、同步代码和异步代码

1.同步代码

逐行执行，需原地等待结果后，才继续向下执行

2.异步代码

调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发一个回调函数

3.js中有哪些异步代码

setTimeout/setIntval
事件
Ajax
异步利用回调函数接受结果

二、回调函数地狱

1.需求：

展示默认第一个省，第一个城市，第一个地区在下拉菜单中

2.概念：

在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱

3.缺点：

可读性差，异常无法捕获，耦合性严重，牵一发动全身

三、Promise-链式调用

1.概念：

依靠then()方法会返回一个新生成的Promise对象特性，继续串联下一环任务，直到结束

2.细节：

then()回调函数中的返回值，会影响新生成的Promise对象最终状态和结果

3.好处

通过链式调用，解决回调函数嵌套问题

四、Promise链式应用

1.目标：

使用Promise链式调用，解决回调函数地狱问题

2.做法：

每个Promise对象中管理一个异步任务，用then返回Promise对象，串联起来
获取Promise对象-.then-return获取新的Promise对象-.then-新的Promise对象-.then

let pname =''
//得到-获取省份Promise对象
axios({url:'http://hmajax.itheima.net/api/province'})
.then(result =>{
    pname= result.data.list[0]
    document.querySelector('.province').innerHTML= pname
    //2.得到-获取城市Promise对象
    return axios({url:'http://hmajax.itheima.net/api/city',params:{ pname}})
}).then(result =>{
    const cname = result.data.list[0]
    document.querySelector('.city').innerHTML= cname
    //3.得到-获取地区Promise对象
    return axios({url:'http://hmajax.itheima.net/api/area',params:{pname,cname }})
}).then(result=>{
console.log(result)
const areaName = result.data.list[0]
document.qs('').innerHTML=areaName
})

五、async函数和await

async函数是使用async关键字声明的函数。async函数是AsyncFunction构造函数的实例，并且其中允许使用await关键字。
async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。

1.概念

在async函数内，使用await关键字取代then函数，等待获取Promise对象成功状态的结果值

async function getData(){
    const pObj= await axios({url:''})
    const pname//获取省份名字
    const cname=axios({url,params:{pname}})//获取城市名字
}

2.async函数和await捕获错误

try{}catch(error){}

六、事件循环

1.概念：

JavaScript有一个基于事件循环的并发模型，事件循环负责执行代码、收集和处理事件以及执行队列中的子
任务。这个模型与其它语言中的模型截然不同，比如C和Java。

2.作用

为了让耗时代码不耗费时间，设计了事件循环

3.定义：

执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制，就叫事件循环

4.JavaScript内代码执行过程

执行同步代码，遇到异步代码交给宿主浏览器环境执行
异步有了结果后，把回调函数放入任务队列排队
当调用栈空闲后，反复调用任务队列里的回调函数

七、宏任务和微任务

1.异步任务

宏任务：由浏览器环境执行的异步代码，例如：js执行脚本，setTimeout/setInterval,Ajax请求完成事件，用户交互事件
微任务：由js引擎环境执行的异步代码，例如：Promise对象.then()的回调
Promise本身是同步的，而then和catch的 回调函数是异步的

2.执行顺序

先微任务再宏任务

八、Promise.all静态方法

1.概念：

合并多个Promise对象，等待所有同时成功完成(或某一个失败)，做后续逻辑

const p=Promise.all([Promise对象，Promise对象，...])
p.then(result=>{
    //result结果:[Promise对象成功结果]
}).catch(error=>{
    //第一个失败的Promise对象抛出的异常
})