vue实现在一个方法执行完后执行另一个方法

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);
        });
      },
}复制

 输出效果