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

【问题标题】：Making http requests inside a for loop ANGULAR JS 2在 for 循环 ANGULAR JS 2 中发出 http 请求
【发布时间】：2016-05-04 23:10:42
【问题描述】：

我正在尝试使用 youtube API。为了获得第 n 个视频的图标，我必须提出请求。我正在考虑创建一个 for 循环，并且在该循环内会有请求。

这种方法的问题是我得到的响应顺序错误且完全随机。

所以我的问题：

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

提前致谢

【问题讨论】：

标签： xmlhttprequest angular ionic2

【解决方案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
   });

【讨论】：

【解决方案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);
}

谢谢你的帮助！！！

【讨论】：