vue js如何同步执行多个接口后再执行后面的代码

飞流银河

于 2023-12-04 09:51:51 发布

阅读量1.2k

点赞数 7

分类专栏：前端文章标签： vue js

本文链接：https://blog.youkuaiyun.com/weixin_40444253/article/details/134776430

版权

前端专栏收录该内容

58 篇文章

订阅专栏

文章讨论了一个使用`asyncMethod`函数，通过`Promise.all`同时加载多个列表数据（getListA至getListH），然后在所有数据获取成功后一次性初始化多个Echarts图表的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    asyncMethod() {
        //先执行
        Promise.all([this.getListA(), this.getListB(),this.getListC(),this.getListD()
        ,this.getListE(),this.getListF(),this.getListG(),this.getListH()]).then(res => {
          //后执行
          this.initEcharts();
          this.initEcharts2();
          this.initEcharts3();
          this.initEcharts4();
          this.initEcharts5();
          this.initEcharts6();
          this.initEcharts7();
          this.initEcharts8();
          this.initEcharts9();
          this.initEcharts10();
          this.initEcharts11();
        })
    },
    getListA() {
        return new Promise((resolve, reject) => {
          getXx().then(response => {
            this.data= response.data;
            resolve('success');
          });
        })
      },
      getListB() {
        return new Promise((resolve, reject) => {
          getXx2().then(response => {
            this.data= response.data;
            resolve('success');
          });
        });

      },
      getListB(){
        .....
      },