文章目录

*Vue项目中，Async与Await设置多个Axios异步请求的执行顺序*1.详解Async与AwaitAsyncAwait 2.设置多个Axios异步请求的执行顺序总结

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>

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（去掉setTimeout延时，方便查看执行顺序）：

总结

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