使用 Observables/RxJS 合并 Angular 中的两个相关 API 调用答案

【问题标题】：Merge Two Dependent API Calls in Angular with Observables/RxJS使用 Observables/RxJS 合并 Angular 中的两个相关 API 调用
【发布时间】：2017-05-12 21:44:18
【问题描述】：

假设我有两个返回 JSON 的 API 调用：

行：

{
  {"row": 1, detailId: "a"}
  {"row": 2, detailId: "b"}
}

行详细信息：

{
  details: { this row details } 
}

我需要获取行，然后遍历每个行对象以获取 detailId 以再次调用 rowDetails，并将详细信息附加到行对象。最终的结构需要像这样发出：

{
  {"row": 1, "detailId": a, "details": { row details}}
  {"row": 2, "detailId": b, "details": { row details}}
}

在角度 1 中，我将使用 q.allSettled 等待所有调用完成。

我正在尝试以可观察的方式做到这一点，但我在概念上和实践上都在苦苦挣扎。我不明白您应该如何实际发出合并的“流”作为最终产品。

我大致试过了：

 this.http
     .get('rows')
     .map(res => res.json())
     .flatMap(group => this.http.get('rowDetails' + detailId))
     .map(res => res.json()).
     .subscribe(res => console.log(res))

Subscribe 只是发出 rowDetails 调用。在合并最终产品的结果时，如何遍历行调用中的每个对象并将该 detailId 用于另一个调用？任何帮助将不胜感激。

【问题讨论】：

您的第二个get 实际上是否依赖于第一个的结果？如果不是 Observable.combineLatest 似乎是最好的选择。
是的，它需要每个行对象的 detailId 来调用以获取该特定行的行详细信息
所以你想为第一次调用的每个结果拆分一个调用，然后将所有结果重新组合在一起？
是的，我相信

标签： angular rxjs angular2-observables

【解决方案1】：

您需要获取每个项目，创建一个 HTTP 请求，并在此内部请求完成后，然后进一步传播更新的项目。

this.http
    .get('rows')
    .map(res => res.json())
    .flatMap(group => this.http.get('rowDetails' + group.detailId)
        .map(res => {
            group.details = res.json();
            return group;
        })
    )
    .subscribe(res => console.log(res))

请注意，我实际上是从内部 map 返回 group。显然有很多方法可以解决这个问题，但我认为这是最简单的一种。

【讨论】：