Question

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

行：

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

rowDetails：

{
  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))

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

Answer 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))

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

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

1 个答案: