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延时,方便查看执行顺序):
总结
每天一个提升小技巧!!!