基于Promise.all实现所有Api加载完成,loading关闭效果

思路

将每个请求封装成promise对象，当请求到数据后都resolve出去，再调用Promsie.all方法将每个promise对象作为参数传入进去。这样每个api的promise对象状态都resolve“解决后”，就能在 Promise.all([p1,p2…p]).then中拿到所有api请求完成的状态，从而实现效果。在这里特别需要注意一下就是：当请求结果异常时，也需要通过reject将promise状态抛出去，否则loading会一直存在

效果

1.请求中

2.所有api请求完成

3.所有api请求时长之和表示，loading持续时长

正文 

1. 定义Promise.all() 所需要的参数

它需要的参数是一个由promise对象组成的数组，因为将每个api请求声明成一个promise对象

 let p1 = this.getApiMouterInfo();
    //2.获取PrinterParams 印刷参数Api数据[调用]
    // let p2 = this.getApiPrinterParams();
    //3.获取AoiTest Aoi检测Api数据[调用]
    let p3 = this.getApiAoiTest();
    //4.获取SpiTest Spi检测Api数据[调用]
    let p4 = this.getApiSpiTest();
    //5.获取tempratureTest 炉温检测 测Api数据[调用]
    let p5 = this.getApiTempratureTest();

2. 每个请求方法返回promise对象

关键代码：

	1.   return new Promise((resolve) => {...});
	2.   resolve(this.mouterInfoApi)

  init(data) {
      return new Promise((resolve,reject) => {
        queryPromotionInfoDetail({ y2300: data.y2300 })
          .then((res) => {
            console.log(res);
            if (res.status == 0) {
              let tempRes = JSON.parse(JSON.stringify(res.data.resultData[0]));
              this.result.b0101 = tempRes.b0101;
              this.result.y2301 = tempRes.y2301;
              this.result.y2302 = `共${tempRes.y2302}人`;
              this.result.y2311 = tempRes.y2311;
              resolve(tempRes);
            } else {
              reject()
            }
          })
          .catch((err) => {
            console.log(err);
            reject(err)
          });
      });
    },

3. 调用Promise.all()方法，处理loading效果

注意：前面每个promise中一定要将结果resolve出来，不然这里永远都接不到结果。

    this.loading = true
    Promise.all([this.init(this.propsData), this.doInit()]).then(()=>{
        this.loading = false
    }).catch(()=>{
        this.loading = false
    })

4. 部分完整代码

  created() {
    this.loading = true
    Promise.all([this.init(this.propsData), this.doInit()]).then(()=>{
        this.loading = false
    }).catch(()=>{
        this.loading = false
    })
  },
  methods: {
    //页面初始化
    init(data) {
      return new Promise((resolve,reject) => {
        queryPromotionInfoDetail({ y2300: data.y2300 })
          .then((res) => {
            console.log(res);
            if (res.status == 0) {
              let tempRes = JSON.parse(JSON.stringify(res.data.resultData[0]));
              this.result.b0101 = tempRes.b0101;
              this.result.y2301 = tempRes.y2301;
              this.result.y2302 = `共${tempRes.y2302}人`;
              this.result.y2311 = tempRes.y2311;
              resolve(tempRes);
            } else {
              reject()
            }
          })
          .catch((err) => {
            console.log(err);
            reject(err)
          });
      });
    },
    doInit() {
      let param = {
        id: this.propsData.y2300,
      };
      if(!param.id) return
      //处理各自的业务
      return new Promise((resolve,reject) => {
        queryPcfjInfo(param).then((res) => {
          console.log(res);
          if (res.status === "0") {
            console.info(res.data.pcfjList);
            this.pcfjList = res.data.pcfjList;
            resolve(this.pcfjList);
          } else {
            this.$message.error(res.message);
            reject()
          }
        });
      }).catch((err)=>{
      });
    },
    submitForm() {
      let param = { ...this.result };
      param.y2300 = this.propsData.y2300;
      upDatePromotionInfoDetail(param)
        .then((res) => {
          console.log(res);
          if (res.status == 0) {
            this.$message({
              type: "success",
              message: "提交成功",
            });
            this.$emit("toIndex", false);
          } else {
            this.$message({
              type: "warning",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

总结：重点就是Promise.all() 方法，然后就是每个Api请求把它封装成Promise,并resolve出去，这里我没有做 reject处理，有需要的话，你可以自己去处理，如果不做reject处理，当请求结果异常时loading效果会一直加载。这里主要针对于.then链式调用写法，在ES7我们有async和await，主要也是基于promise的封装，用法更简洁，不需要我们在做resolve操作