Angular-RxJS ConcatMap-从两个服务调用返回数据

可能是一个基本问题，但我有一个Angular应用程序，它会调用后端服务来检索一些数据，然后使用这些数据进行另一个后端服务调用

第二个服务调用依赖于第一个成功完成，因此我使用RxJS中的concatMap（）函数

但是，我下面的代码只返回第二次服务调用的数据。我需要两个服务调用返回的所有数据

有一种感觉，我把电话打乱了，但进展不大。提前谢谢

getData(id: String): Observable<any[]> {
return this.http.get<any>(`${this.baseUrl}/path/${id}`).pipe(
  concatMap(
    evt =>
      <Observable<any[]>>(
        this.http.get<any[]>(
          `${this.baseUrl}/path/relatedby/${evt.child_id}`
        )
      )
  ),
  retry(3),
  catchError(this.handleError("getData", []))
);}

getData（id:String）：可观察{
返回this.http.get（`${this.baseUrl}/path/${id}`）.pipe(
海图(
evt=>
(
这是http.get(
`${this.baseUrl}/path/relatedby/${evt.child_id}`
)
)
),
重试（3），
catchError（this.handleError（“getData”，[]））
);}

管道函数将给定的函数（作为参数提供）组合在一起，并以串联方式执行它们，最后在经过各个阶段后返回最终输出。这就是为什么只从第二次调用中获得结果，因为这是管道中的最后一个函数（返回值的最后一个函数）

让我们看看这个

const filterOutEvens = filter(x => x % 2)
const double = map(value => value * 2);
const sum = reduce((acc, next) => acc + next, 0);

Observable.range(0, 10).pipe(
  filterOutEvens, 
  double, 
  sum)
 .subscribe(console.log); // 50

这里，从[1,2,3,4,5,6,7,8,9,10]中，它首先过滤掉偶数， 给出[1,3,5,7,9]，传递给下一个函数（double），该函数将给定数组的每个元素加倍，给出[2,6,10,14,18]，该函数传递给管道中的下一个函数，即sum（将数组中的元素相加）。sum函数是管道中的最后一个函数，返回50，这不仅是sum（）的返回值，也是整个管道（）的返回值

示例代码取自：

编辑
如果您确实需要两个请求的数据，可以使用“map”操作符将第一个请求的结果打包到第二个请求的结果中

 getData(id: String): Observable<any[]> {
  return this.http.get<any>(`${this.baseUrl}/path/${id}`).pipe(
 concatMap(
    evt =>
       <Observable<any[]>>(
          this.http.get<any[]>(
      `${this.baseUrl}/path/relatedby/${evt.child_id}`
        ).map(res =>( {"response1":evt, "response2":res}) )
  )
 ),
 retry(3),
 catchError(this.handleError("getData", []))
 );}

getData（id:String）：可观察{
返回this.http.get（`${this.baseUrl}/path/${id}`）.pipe(
海图(
evt=>
(
这是http.get(
`${this.baseUrl}/path/relatedby/${evt.child_id}`
).map（res=>（{“response1”：evt，“response2”：res}））
)
),
重试（3），
catchError（this.handleError（“getData”，[]））
);}

谢谢，这很有效，对管道的解释澄清了我的许多问题。map函数工作得很好，不过我只需要在另一个管道中敲击它。下面更新了代码，再次感谢您的帮助，非常感谢

getData(id: String): Observable<any> {
return this.http.get<any>(`${this.baseUrl}/path/${id}`).pipe(
  concatMap(
    evt =>
      <Observable<any>>(
        this.http
          .get<any>(`${this.baseUrl}/path/relatedby/${evt.child_id}`)
          .pipe(
            map(resp => ({
              evtData: evt,
              childData: resp
            }))
          )
      )
  ),
  retry(3),
  catchError(this.handleError("getData", []))
);

getData（id:String）：可观察{
返回this.http.get（`${this.baseUrl}/path/${id}`）.pipe(
海图(
evt=>
(
这是http
.get（`this.baseUrl}/path/relatedby/${evt.child_id}`）
.烟斗(
映射（resp=>({
evtData:evt，
儿童数据：resp
}))
)
)
),
重试（3），
catchError（this.handleError（“getData”，[]））
);

---

}

我可能错了，但双重管道听起来没必要。利用fat arrow语法括号实现隐式返回，我完成了这项工作

this.$obs = this.route.params.pipe(
    concatMap((params: Params) => {
        console.log(params);
        return this.useParams(params.id)
    }),
    share() // irrelevant
);

让我知道，如果有警告与此超过其他答案。

---

#concatMapKindaRocks

应该补充一点，我正在使用Angular 6和RxJS 6感谢对管道的精彩解释，为我澄清了很多疑问！虽然我不得不用另一根管子敲击地图，但地图反应对我来说非常有效。如果有兴趣，请更新下面的代码，再次感谢您的快速响应，非常感谢。