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]，它被传递给下一个函数 (double)，它将给定数组的每个元素加倍，给出 [2,6,10,14,18]，它被传递给pipe 中的下一个函数，它是 sum(将数组中的元素相加)。 sum函数是pipe中的最后一个函数，返回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", []))
 );}