俩兄弟async，await?

了解async和await

1.它们俩是什么?

async：

1. 简述就是异步，它可以异步的声明一个函数
2. 它也是一个关键字，如果把它放到函数的前面，这个函数就会变成一个异步函数
3. async函数与普通函数使用方式没差别
4. async函数返回一个Promise对象，await与之联系

await：
5. 字面翻译就是等待，它是用来等待async异步方法的执行
6. 它用来等待异步函数内容的Promise对象，只能在定义async函数的内容使用

async、await的优点

1. 它会依次执行
2. 同步代码编写方式： Promise使用then函数进行链式调用，一直点点点，是一种从左向右的横向写法；async/await从上到下，顺序执行，就像写同步代码一样，更符合代码编写习惯
3. 多个参数传递： Promise的then函数只能传递一个参数，虽然可以通过包装成对象来传递多个参数，会导致信息沉淀，又必须去解析重组参数，比较麻烦；async/await没有这个限制，可以当做普通的局部变量来处理，可以用let或者const定义的块级变量想怎么用就怎么用，随便定义使用
4. 同步代码和异步代码可以一起编写： 使用Promise的时候同步异步代码放在不同的then节点中，这样结构更加清晰；async/await都是同步的，不需要纠结同步和异步的区别，当然，异步过程需要包装成一个Promise对象放在await关键字后面
5. sync/await是对Promise的优化： async/await是基于Promise的，是进一步的一种优化，不过在写代码时，Promise本身的API出现得很少，很接近同步代码的写法

2.它们可以一起做什么？

使用async和await,再配合promise（实例对象）使用是一个异步方法，但是阻塞式。
出现阻塞问题：只会在使用async和await的函数作用域有效，本质还是异步回调

3.使用场景

async通常用来处理异步的操作
需求：第一步在ajax中拿到接口信息，第二步调用在ajax拿到的接口，达到异步操作。

vue操作

//普通promise
methods: {
     getLocation(phoneNum) {
         return axios.post('/one接口', {
             phoneNum
         })
     },    
     getFaceList(province, city) {
         return axios.post('/two接口', {
             province,
             city
         })
     },  
     getFaceResult () {
          this.getLocation(this.phoneNum).then(res => {
              if (res.status === 200 && res.data.success) {
              let province = res.data.obj.province;
              let city = res.data.obj.city;
                  this.getFaceList(province, city).then(res => {
                        if(res.status === 200 && res.data.success) {
                             this.faceList = res.data.obj
                        }
                  })
              }
         }).catch(err => {
             console.log(err)
         })     
     }
}

async/await案例：
首先把getfaceresult转为async，因为它的调用方法和普通函数的调用是一致

async getfaceresult () {
                let location = await this.getLocation(this.phoneNum);
                if (location.data.success) {
                    let province = location.data.obj.province;
                    let city = location.data.obj.city;
                    let result = await this.getFaceList(province, city);
                    if (result.data.success) {
                        this.faceList = result.data.obj;
                    }
                }
            }

try cathc()方法，不会报错，如果异常，就会catch处理结果

async getFaceResult () {
                try {
                    let location = await this.getLocation(this.phoneNum);
                    if (location.data.success) {
                        let province = location.data.obj.province;
                        let city = location.data.obj.city;
                        let result = await this.getFaceList(province, city);
                        if (result.data.success) {
                            this.faceList = result.data.obj;
                        }
                    }
                } catch(err) {
                    console.log(err);
                }
            }