Promise以及Promise.all的简单用法

当你请求多个数据，相统一处理的时候，假设有两个单独的接口获取页面数据，两接口使用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;
        })
 },