在开发中，可能会遇到两个或多个函数异步执行的情况，除了使用promise处理异步，还可以使用async/await处理，async/await是es7推出的一套关于异步的终极解决方案，可以让你轻松写出同步风格的代码的同时又拥有异步机制，更简洁清晰

async/await的特点

async：是一个修饰符，表示函数是异步执行。用于申明一个function是异步的。async定义的函数会默认的返回一个Promise对象resolve的值，因此对async函数可以直接进行then的操作

await：也是一个修饰符，表示当前函数先执行，执行完以后，再执行其他函数。用于等待一个异步方法执行完成。await关键字只能放在async函数内部，await关键字的作用就是获取Promise中返回的内容，获取的是Promise函数中resolve或者reject的值（如果await后面并不是一个Promise的返回值，则会按照同步程序返回值处理，为undefined ）

async/await 是一个用同步思维解决异步问题的方案，等结果出来以后，代码才会继续往下执行

可以通过多层async function的同步写法代替传统的callback嵌套

使用async-await将使得整个函数延后执行，即同步的代码执行完毕后再执行，对于async函数的内部，使用了await的地方会先执行，然后再执行函数内await之后的同步代码

async/await与promise语法

使用promise：

const maskRequet = () =>{
    getJSON().then(res=>{
        console.log(res)
    })
}

使用async/await：

const maskRequest = async() =>{
  let result = await getJSON()
  console.log(result)
}

async/await的基本用法

// 定义一个异步函数（假设他是一个异步函数）
getJSON(){
    return 'JSON'
}

// 在需要使用上面异步函数的函数前面，加上async声明，声明这是一个异步函数
async testAsync() {
  // 在异步函数前面加上await，函数执行就会等待用await声明的异步函数执行完毕之后，再往下执行
  await getJSON()
  
  ...剩下的代码
}

还需注意一点，在使用async/await的时候，是无法捕获错误的，这个时候就要用到try/catch来进行错误的捕获

async testAsync() {
  try {
     await getJSON()
  } catch(err) {
     console.log(err)
  }
  ...剩下的代码
}

async函数返回的是一个Promise对象，下面代码输出结果为：Promise{: "hello async"}

async function testAsync() {
    return "hello async";
}

const result = testAsync();
console.log(result);

async/await本身还是基于Promise的，因为await本身返回的也是一个Promise，它只是把await后面的代码放到了await返回的Promise的.then后面，以此来实现。

mounted(){
  console.log('a');
  this.getData();
  console.log('b')
}
methods:{
   async getData(){
     await this.$http({
       url : 'xxx.com/getData',
       method:'get',
     })
     .then((res)=>{
       console.log('c');
     });
     //等待await执行完毕再执行下面的同步函数
     console.log('d')
   }
 }

以上代码执行顺序为a b c d

Vue处理异步请求之使用async-await

async/await的特点

async/await与promise语法

async/await的基本用法