Promise以及Promise.all的简单用法

Posted 2022-07-28 尔嵘

当你请求多个数据，相统一处理的时候，假设有两个单独的接口获取页面数据，两接口使用Promise处理是互不影响：

    //基础信息获取
    getPlantProductReportInfoItems() 
      return new Promise((resolve, reject) => 
        treeData[0].children = [];
        getPlantProductReportInfoItems()
          .then(( data: res ) => 
            console.log('res', res);
            if (res.code !== 0) 
              this.roleLoading = false;
              this.$message.config(
                maxCount: 1,
              );
              this.$message.destroy();
              return this.$message.error(res.msg);
            
            if (JSON.stringify(res.data) != '') 
              for (let item in res.data) 
                let arrobj = 
                  key: item,
                  title: res.data[item],
                  children: [],
                  // disabled: !item.includes(children) ? false : true
                ;
                treeData[0].children.push(arrobj);
              
            
            resolve();
          )
          .catch((error) => 
            //失败调用reject函数
            reject(error);
          );
      ).then((data) => );
    ,
    
    //统计数据
    getPlantProductReportDataItems() 
      return new Promise((resolve, reject) => 
        treeData[1].children = [];
        getPlantProductReportDataItems(
          dataType: this.dataForm.selectTime2Type,
        )
          .then(( data: res ) => 
            console.log('res', res);
            if (res.code !== 0) 
              this.roleLoading = false;
              this.$message.config(
                maxCount: 1,
              );
              this.$message.destroy();
              return this.$message.error(res.msg);
            
            if (JSON.stringify(res.data) != '') 
              let arrobj = ;
              for (let item in res.data) 
                arrobj = 
                  key: item,
                  title: res.data[item],
                  children: [],
                  // disabled: !item.includes(children) ? true : false
                ;
                treeData[1].children.push(arrobj);
              
            
            resolve();
          )
          .catch((error) => 
            //失败调用reject函数
            reject(error);
          );
      ).then((data) => );
    ,

使用Promise.all时，每一个promise对象都会返回自身。这样处理比之前一个个的调用接口速度快些。

//设置弹窗
handleSettingItems() 
      Promise.all([this.getPlantProductReportDataItems(),this.getPlantProductReportInfoItems()]).then(() => 
          transferDataSource = [];
          flatten(treeData);
          this.dataSource = transferDataSource;
          console.log("this.dataSource", this.dataSource);
          this.settingVisible = true;
        )
 ,