在for循環中創建http請求ANGULAR JS 2

Question

我正在嘗試使用youtube API。 爲了獲得前n個視頻的圖標，我必須提出請求。 我正在考慮做一個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); 
} 

感謝您的幫助！