首页 前端知识 vue实现在一个方法执行完后执行另一个方法

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

2024-03-15 10:03:32 前端知识 前端哥 791 425 我要收藏

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://www.qianduange.cn//article/3843.html
标签
评论
发布的文章

jQuery之class类操作

2024-04-12 20:04:54

jQuery 菜鸟教程学习

2024-04-12 20:04:22

jQuery

2024-01-31 12:01:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!