如何等待并从Angular 4中的循环获取每个HttpClient服务调用的响应

Question

我有一种情况，我需要运行循环并获取相应项目的描述。然后，与项目ID和其他信息一起，我必须将获取的描述包括在数据表中。

addDescription(){
this.arrayOfItems.forEach(element => {

   // CALL a function which will make a service call
   this.fetchDescription(element);

   //CODE TO DECLARE AN INTERFACE TO ASSIGN RESPECTIVE VALUES. eg.

   // ITEM_ID : element.id,
   // ITEM_DEF : this.fetchedDescription.join("\n")
}

功能体：

fetchDescription(elementToFetchDesc){

 //Declaring HTTPPARAMS in PassingParams variable

 this.componentService.getDesc(PassingParams)
         .subscribe((response: HttpResponse<any>) => {
                if(response.status ==200){
                    this.fetchedDescription = reponse.body.output.slice(6,-1);
                }
                //Code if response status is NOT 200
}

在componentService服务：

construcutor(private httpConn: HttpClient){}

getDesc(Params){
    // Declare URL
    return this.httpConn.get(URL, {params: Params, observe: 'response'});
}

问题：

因为它在一个循环中运行并且订阅是异步调用，所以，在forEach中运行循环之后它就会出现。因此，描述不会被分配给接口中的变量（ITEM_DEF）。

为了解决这个问题，我实施了一些改动以使用promise。在服务中我补充说：

 import 'rxjs/add/operator/toPromise';

并将服务方法更新为：

 return this.httpConn.get(URL, {params: Params, observe: 'response'})
                     .toPromise();    // converted observable into promise

组件也发生了变化：内部fetchDescription功能：

取代.subscribe为.then

但问题仍然存在。请让我知道我在哪里做错了实现这个逻辑。

Answer 1

解决方案是将observable转换为promise但不使用then！

例：

这是您发送请求的服务功能：

myRequest(num) {
   return this.http.get('http://someUrl.com/' + num).toPromise(); 
}

这是发送组件类中所有请求的函数：

 async sendAll() {
    let response = [];
    for(let i = 0; i < 5; i++) {
        response[i] = await this.myService.myRequest();
    }
  // Got all the results!
 }

Answer 2

解：

功能体：

fetchDescription(elementToFetchDesc):  Observable<string> {

  //Declaring HTTPPARAMS in PassingParams variable

  return this.componentService.getDesc(PassingParams)
      .map((response: HttpResponse<any>) => {
          if(response.status ==200){
             return reponse.body.output.slice(6,-1);
          }
       });
     }
  }

呼叫：

this.fetchDescription(element).subscribe((description: string) => {
   ITEM_ID : element.id,
   ITEM_DEF : description
});

Answer 3

为此你应该使用rxjs。

checkStatus(url: string, id: string): Observable<string> {
const trigger$ = new Subject<string>();
const time = Date.now();

return trigger$.asObservable().startWith(url).concatMap((u) => {
  return this.ping(u).map(() => {
    trigger$.complete();

    return id;
  }).catch((err) => {
      trigger$.next(u);

    return Observable.empty<any>();
  });
});
}


protected ping(url: string): Observable<any> {
return this.http.get(url)
  .catch(err => Observable.throw(err));
}

这里concatMap运算符仅在第一个observable完成时触发下一个observable，即第一个API调用的响应可用。每当你在触发器$ subject上调用方法complete()时，它将完成observable和API调用。您可能必须更改调用complete()的逻辑。