Vue项目中，Async与Await设置多个Axios异步请求的执行顺序

1.详解Async与Await

Async

（1）先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思，异步函数也就意味着该函数的执行不会阻塞后面代码的执行。async 函数返回的是一个promise 对象，如果要获取到promise 返回值，我们应该用.then方法。
（2）如果async 函数中有返回一个值，当调用该函数时，内部会调用Promise.resolve() 方法把它转化成一个promise 对象作为返回，但如果函数内部抛出错误， 那么就会调用Promise.reject() 方法返回一个promise 对象。

Await

（1）await是等待的意思，那么它等待什么呢，它后面跟着什么呢？其实它后面可以放任何表达式，不过我们更多的是放一个返回promise 对象的表达式。注意await 关键字只能放到async 函数里面。
（2）async 和 await 基于 promise 的。 使用 async 的函数将会始终返回一个 promise 对象。 这一点很重要，要记住，这可能是你遇到的容易犯错的地。在使用 await 的时候我们暂停了函数，而非整段代码。async 和 await 是非阻塞的。你仍然可以使用 Promise 例如 Promise.all()。

2.设置多个Axios异步请求的执行顺序

template模块：

<el-button round @click="selectAll">获取全部数据</el-button>
1

script模块：

export default {
  name: 'vue_project',
  methods: {
    async selectAll() {
      console.log(await this.selectAll1());
      this.selectAll2();
    },
    selectAll1() {
      return new Promise((resolve, reject) => {
        // 第一Axios请求
        this.$axios({
          url: '/StandardController/selectAll1',
          method: 'POST'
        }).then(data => {
          if (data.data.success) {
            setTimeout(() => {
              resolve("第一Axios请求");
            }, 2000)
          }
        }).catch(error => {
          this.$message({message: '网络连接异常', type: 'error'});
        })
      });
    },
    selectAll2() {
      // 第二Axios请求
      this.$axios({
        url: '/StandardController/selectAll2',
        method: 'POST'
      }).then(data => {
        if (data.data.success) {
          console.log("第二Axios请求");
        }
      }).catch(error => {
        this.$message({message: '网络连接异常', type: 'error'});
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

开始测试1：

开始测试2（去掉setTimeout延时，方便查看执行顺序）：

---

总结

每天一个提升小技巧！！！