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

pipe函数组合给定的函数（作为参数提供）并按顺序执行它们，并在经过各个阶段之后最终返回FINAL OUTPUT。这就是为什么只从第二次调用中获得结果的原因，因为那是管道中的最后一个函数（最后一个返回值的函数）。

例如：让我们检查一下

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函数是管道中的LAST函数，它返回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", []))
 );}

Answer 2

谢谢，那很有效，管道的解释消除了我的很多问题。地图功能可以完美运行，尽管我只需要在另一个管道中对其进行说唱即可。下面更新了代码，再次感谢您的帮助，不胜感激。

{{1}}

}

Answer 3

我在这里可能是错误的，但是不需要双管道。利用胖箭头语法括号获得隐式返回，我完成了这项工作。

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

让我知道在其他答案上是否还有此警告。 #concatMapKindaRocks

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

3 个答案: