阻止执行到下一行直到 Api 的响应

Question

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

Class:

 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;
      })
     );
    }

Answer 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);
});

阻止执行到下一行直到 Api 的响应

Block Execution to Next Line Untill Response From Api

api

observable

rxjs

typescript

angular