阻止执行到下一行，直到来自 Api 的响应 [重复]答案

【问题标题】：Block Execution to Next Line Untill Response From Api [duplicate]阻止执行到下一行，直到来自 Api 的响应 [重复]
【发布时间】：2021-04-08 06:25:54
【问题描述】：

考虑这个调用 api 获取条形图数据的 observable 方法

类：

 export interface AlarmChart {
 chartLabel: string[];
 data: number[][];
 }

API 调用

   getBarChartDataV2(period: string): Observable<AlarmChart> {

   for(let x = 0 ;x<severities.length;x++){
    //each severity all values of a week
    var countoFserverity=[];
    
        for(let i = 0 ;i<daysRangeForWeek.length;i++){

        
          let url =  `${this.config.apiCumulocityUrl}/alarm/alarms?dateFrom=${daysRangeForWeek[i].dayStart}&dateTo=${daysRangeForWeek[i].dayEnd}&severity=${severities[x]}'`;
    
         url = url.replace(/'/g,'');
         this.callApi(url).subscribe(res=>{
          let response:any = res;
            countoFserverity.push(response.alarms.length);
            //add to final when all results came

            
         });
         
        } 

   //PREVENT GOING TO THIS LINE BEFORE RESPONSE FROM API INSIDE SUBSCRIBE
    data.push(countoFserverity);
    
      }
  debugger;
  result = {
  chartLabel: labels,
  data: data,
  }; 

     return result;

 }

API 调用者

  callApi(url:string):Observable<any>{

   return   this.httpClient.get(url).pipe(
    map(res => {
     debugger;
      let response:any = res;
      return response;
      })
     );
    }

【问题讨论】：

您能否重新格式化您的代码示例。很难阅读。

标签： angular typescript api rxjs observable

【解决方案1】：

您可以使用 rxjs zip operator，这将在所有 api 调用后触发，类似于以下内容：

   const calls = [];
   for(let x = 0 ;x<severities.length;x++){
    //each severity all values of a week
    var countoFserverity=[];
    
      for(let i = 0 ;i<daysRangeForWeek.length;i++){

      
        let url =  `${this.config.apiCumulocityUrl}/alarm/alarms?dateFrom=${daysRangeForWeek[i].dayStart}&dateTo=${daysRangeForWeek[i].dayEnd}&severity=${severities[x]}'`;
  
        url = url.replace(/'/g,'');
        calls.push(this.callApi(url).pipe(
          tap((res) => {
            let response:any = res;
            countoFserverity.push(response.alarms.length);
            //add to final when all results came

            
          })));
        }
    }
         
   // this wont fire until all calls are done
   zip(...calls).subscribe((values) => {
      values.push(countoFserverity);
   }

我没有你的其余代码，所以这是近似的，这是一个可以构建的示例：

const calls = [];
calls.push(this.httpClient.get("https://api.giphy.com/v1/channels/search?q=house&apiKey=Gc7131jiJuvI7IdN0HZ1D7nh0ow5BU6g")
  .pipe(
    tap((val) => console.log(val))
  ));
calls.push(this.httpClient.get("https://api.giphy.com/v1/channels/search?q=house&apiKey=Gc7131jiJuvI7IdN0HZ1D7nh0ow5BU6g"));

zip(...calls).subscribe((val) => {
  console.log(val);
});

【讨论】：