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

Question

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

第二个服务调用依赖于第一个成功完成，所以我使用 RxJS 中的 concatMap() 函数。

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

感觉我搞砸了 .pipe 调用，但没有取得太大进展。提前致谢。

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", []))
);}

Answer 1

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

例如：让我们看看这个

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]，它被传递给next 函数 (double)，将给定数组的每个元素加倍，给出 [2,6,10,14,18]，它被传递给管道中的下一个函数，即 sum（将数组中的元素相加） 。sum函数是管道中的最后一个函数，返回50，这不仅是sum()的返回值，也是整个pipe()的返回值。

示例代码取自：https://blog.hackages.io/rxjs-5-5-piping-all-the-things-9d469d1b3f44

编辑
如果您确实想要两个请求中的数据，您可以使用“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", []))
 );}