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

发布时间:2023年12月17日

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

?输出效果

文章来源:https://blog.csdn.net/askuld/article/details/134969830
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。