前言

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文档去了