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

前言

1. 我使用的angular，内容同样适用于Vue,React
2. 基于es6 的 promise 的特性

思路

将每个请求封装成promise对象，当请求到数据后都resolve出去，再调用Promsie.all方法将每个promise对象作为参数传入进去。这样每个api的promise对象状态都resolve“解决后”，就能在 Promise.all([p1,p2…p]).then中拿到所有api请求完成的状态，从而实现效果。

效果

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)

 //1.获取mouter 贴片Api数据[方法]
 getApiMouterInfo() {
    let paramsObj = {
      timestampFrom: 1609466135000, timestampTo: 1609878326000, line: "HS3A", face: "T", location: "C1205"
    }
    return new Promise((resolve) => {
      this.prDailyService.getMounterResult(paramsObj.timestampFrom, paramsObj.timestampTo, paramsObj.line, paramsObj.face, paramsObj.location).then(
        res => {
          this.mouterInfoApi = res;
          resolve(this.mouterInfoApi)
          // console.log("获取mouter 贴片Api数据[方法]",res);
        }
      )
    })
  }

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

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

 Promise.all([p1,p3, p4,p5]).then(function () {
      console.log("所有api加载完成");
      that.isLoading = false; //关闭loading效果
      that.isShowContent = true; //展示UI内容
    })

4. 部分完整代码

...
 //获取所有Api数据[定义]
  getAllApiData() {
    console.log("同步加载所有Api");
    //1.获取mouter 贴片Api数据[调用]
    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();
    let that=this;
    Promise.all([p1,p3, p4,p5]).then(function () {
      console.log("所有api加载完成");
      that.isLoading = false; //关闭loading效果
      that.isShowContent = true; //展示UI内容
    })
  }

...
 //1.获取mouter 贴片Api数据[方法]
  getApiMouterInfo() {
    let paramsObj = {
      timestampFrom: 1609466135000, timestampTo: 1609878326000, line: "HS3A", face: "T", location: "C1205"
    }
    return new Promise((resolve) => {
      this.prDailyService.getMounterResult(paramsObj.timestampFrom, paramsObj.timestampTo, paramsObj.line, paramsObj.face, paramsObj.location).then(
        res => {
          this.mouterInfoApi = res;
          resolve(this.mouterInfoApi)
          // console.log("获取mouter 贴片Api数据[方法]",res);
        }
      )
    })
  }
 ...
 ...
 ...

---

总结：重点就是Promise.all() 方法，然后就是每个Api请求把它封装成Promise,并resolve出去，这里我没有做 reject处理，有需要的话，你可以自己去处理。

ok,分享完这个，再分享一个，就看Ionic文档去了