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

深藏阁楼爱情的钟 2024-02-05 14:59 39阅读 0赞

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

控制台输出

![28d8e6b75eee4e6daa1d4afe8da0d168.png][]

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

输出效果

![fdea40c8e54b497ca8aa93ef05e57ca1.png][]

[28d8e6b75eee4e6daa1d4afe8da0d168.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/3586fbcf17a74a40b0a477a979d600c1.png
[fdea40c8e54b497ca8aa93ef05e57ca1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/e19831326d8541939ad9d578497a29d7.png