在开发中,可能会遇到两个或多个函数异步执行的情况,对于Vue中函数的异步函数执行做了一个小总结,如下:
异步执行使用async和await完成
created() {
this.init()
},
methods: {
async init(){
await this.getList1();
this.getList();
},
// 函数1
getList(){
return 'hello world';
}
// 函数2
async getList1(){
return '虽然在后面,但是我先执行';
}
}
async基础用法
1. async函数,会返回一个promise对象,可以用.then调用async函数中return的结果.
async function helloAsync() {
return "返回结果";
}
console.log(helloAsync()) // 输出Promise对象: Promise {<fulfilled>: '返回结果'}
helloAsync().then(v => {
console.log(v); // 输出:返回结果
})
2. async函数中,可以使用await表达式,async函数执行,遇到await,会先暂停,等到await后的异步执行完毕,再继续往后执行.
// 1.使用await
function testAwait() {
return new Promise((resolve) => {
setTimeout(function () {
console.log("异步中的输出");
resolve();
}, 1000);
});
}
async function helloAsync() {
await testAwait(); // 等待异步
console.log("async中的输出");
}
helloAsync(); // 输出:先输出"异步中的输出",再输出"async中的输出"
// 2.不使用await
function testAwait() {
return new Promise((resolve) => {
setTimeout(function () {
console.log("异步中的输出");
resolve();
}, 1000);
});
}
async function helloAsync() {
testAwait();
console.log("async中的输出");
}
helloAsync(); // 输出:先输出"async中的输出",再输出"异步中的输出"
解析:
async:表示函数是异步执行,
await:表示当前函数先执行,执行完之后,再执行其他函数
ps:await用于等待一个promise对象,它只能在async函数中使用.
标签:function,输出,vue,函数,异步,await,async From: https://blog.51cto.com/u_15967457/6065068