在for循环ANGULAR JS 2中发出http请求

Question

我正在尝试使用youtube API。为了获得前第n个视频的图标，我必须提出请求。我想做一个for循环，在这个循环中会有请求。

这种方法的问题是，我得到的回复顺序错误，而且完全是随机的。

所以我的问题：

有没有办法让for循环等待响应？我也可以使用RxJS操作员，但我不知道我应该搜索什么

提前感谢

Answer 1

您可以利用Observable.forJoin方法。在这种情况下，当所有请求都结束时，将调用"全局"回调。

这是一个示例：

Observable.forkJoin([
  this.http.get('/req1').map(res => res.json()),
  this.http.get('/req2').map(res => res.json()),
  (...)
]).subscribe(results => {
  // Called when all requests have ended
  var result1 = results[0];
  var result2 = results[1];
  (...)
});

在您的特定用例中，您还可以利用flatMap操作符：

this.http.get('/videos').map(res => res.json())
   .flatMap(videos => {
     return Observable.forkJoin(videos.map((video) => {
       return this.http.get(`/video/${video.id}/icon`)
                       .map(res => res.json());
     });
   }).subscribe(results => {
     // all icons received here
   });

Answer 2

所以我最终使用了这样的东西。

searchVideo( videoIdArray ) {
  let observableBatch = [];
  let data;
  let i;
  let videosTempArray: Array<Video>=[];
  for(i=0;i<videoIdArray.length;i++){
      let videoTemp: Video= {};
      videosTempArray.push(videoTemp);
  }
  videosTempArray.forEach(( videoTemp, key ) => {
          observableBatch.push( this.http.get(BASE_URL_VIDEO + '?part=statistics%2Csnippet' + '&id=' + videoIdArray[key].videoId + '&key=' + API_TOKEN)
                    .map((res: Response) => {
                                              res.json();
                                              // console.log(key);
                                              data = res.json();
                                              videosTempArray[key].channelId=data.items[0].snippet.channelId;
                                              videosTempArray[key].tags=data.items[0].snippet.tags;
                                              videosTempArray[key].views=data.items[0].statistics.viewCount;
                                              videosTempArray[key].likes=data.items[0].statistics.likeCount;
                                              videosTempArray[key].dislikes=data.items[0].statistics.dislikeCount;
                                              return videosTempArray[key];
                                           }
                        )
          );
  });
  return Observable.forkJoin(observableBatch);
}

谢谢你的帮助！！！