角度 4 中的嵌套 HTTP 调用答案

【问题标题】：Nested HTTP calls in angular 4角度 4 中的嵌套 HTTP 调用
【发布时间】：2017-08-01 08:18:30
【问题描述】：

我需要在角度 4 中进行嵌套的 http 调用，这是我的场景，第一个调用是搜索 api 调用，它返回 ID 列表，然后我需要遍历 ID 并使用每个 ID 进行另一个 api 调用以获取详细信息。使用 angular 4 实现这一目标的最佳方法是什么。

【问题讨论】：

标签： angular http rxjs angular2-observables

【解决方案1】：

您可以使用 RxJs 切换方法来实现这一点，方法如下：

http.get(/*you params here*/).switchMap(firstResponse => {
    let idsArray = extractArrayFromResponse(firstResponse);
    // Loop through Array
    let arrayOfObservables = idsArray.map(id => http.get(/*other params*/));
    // Now you need to map it to Obervable of arrays
    let obervableOfArrays = arrayOfObservables.merge().toArray();

    return obervableOfArrays;
})

请在此处查看Reactive Extensions 的文档： http://reactivex.io/documentation/operators.html

您可能正在使用它的 JS 实现，可以在这里找到： https://github.com/reactivex/rxjs

此外，在您的情况下，按照@cyrix 的建议检查forkJoin 运算符可能很有用。在这里找到 JS 实现： http://reactivex.io/documentation/operators/zip.html

【讨论】：

我建议说您的 github 链接适用于 RxJs 版本 4，最新版本是这个：github.com/reactivex/rxjs 并且可能添加一些关于 forkJoin 运算符的内容，因为它会等待所有发出之前要完成的请求。
@eddyP23 我收到错误“可观察的类型数组上不存在属性合并”
您需要像Observables 上的任何其他运算符一样导入merge 运算符，如下所示：import 'rxjs/add/operator/merge';