Vue 提供了多种异步处理的方法,以下是2种实现方式:
1、使用回调函数
使用回调函数处理异步操作。在异步方法中传入一个回调函数,然后在异步方法完成后调用回调函数。
methods: {
handleAsync() {
this.someAsyncMethod(() => {
console.log('异步方法1已完成');
this.someAsyncMethod2(() => {
console.log('异步方法2已完成');
});
});
},
someAsyncMethod(callback) {
// 异步操作
setTimeout(() => {
callback();
}, 1000);
},
someAsyncMethod2(callback) {
// 异步操作
setTimeout(() => {
callback();
}, 1000);
},
}
控制台输出
2、 使用 async/await
Vue 中也可以使用 async/await 语法糖来处理异步操作。在异步方法前加上 async
关键字,然后使用 await
等待异步方法完成。
method:{
async handleAsync() {
await this.someAsyncMethod();
await this.someAsyncMethod2();
console.log('异步方法已完成');
},
async someAsyncMethod() {
// 异步操作
await new Promise((resolve, reject) => {
console.log('11111111111');
setTimeout(() => {
resolve();
}, 1000);
});
},
async someAsyncMethod2() {
// 异步操作
await new Promise((resolve, reject) => {
console.log('2222222222');
setTimeout(() => {
resolve();
}, 1000);
});
},
}
输出效果