vue 使用 async 和 await 实现异步 axios 同步化（实战案例：数据异步校验通过后，再执行保存）

必备知识点

• axios请求会生成一个Promise实例对象
• await后面可以直接跟一个Promise实例对象，返回值不是Promise对象，而是Promise对象处理之后的结果（await后面跟一个axios请求时，返回值即请求的响应结果 res）
• 若await 后的表达式的值不是一个 Promise，则该值将被转换为一个已正常处理的 Promise
• await 只能在使用async定义的函数中使用
• async函数都会隐式返回一个promise，要获取Promise的返回值应该用then方法

async function timeout(){
    return "helloworld";
}
timeout().then((result)=>{
    console.log(result);
});
console.log("我在异步函数后面，会先执行谁呢");

// 我在异步函数后面，会先执行谁呢
// helloworld

async 、await 与Promise对比

1、不再需要多层.then方法
假设一个业务分很多步骤完成，并且每个步骤都是异步，依赖上一个步骤的结果。

function takeLongTime(n) {
    return new Promise(resolve => {
        setTimeout(() => resolve(n + 200), n);
    });
}

function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}

function step2(n) {
    console.log(`step2 with ${n}`);
    return takeLongTime(n);
}

function step3(n) {
    console.log(`step3 with ${n}`);
    return takeLongTime(n);
}

// Promise方式
function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => step2(time2))
        .then(time3 => step3(time3))
        .then(result => {
            console.log(`result is ${result}`);
            console.timeEnd("doIt");
        });
}

doIt();

// async await方式
async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time2);
    const result = await step3(time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}
doIt();

2、可以对Promise进行并行处理

案例需求描述

执行保存用户信息的操作，对新录入的用户信息进行校验，若数据库中存在相同name的用户，则提示修改；若不存在相同name的用户，则可以保存

代码实现

  methods: {
    async ifvalid() {
      // 校验：数据库中是否存在name为张三的用户;
      let res = await this.$http.get("/user/ifexist?name=张三");
      if (res.data) {
        return true;
      } else {
        return false;
      }
    },
    async save() {
      if (await this.ifvalid()) {
        alert("校验通过，可以保存啦！");
      } else {
        alert("校验未通过，请修改后重试！");
      }
    }
  }