Angular

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

管道函数组合给定的函数（作为参数提供）并依次执行它们，最后 return 经过各个阶段后的最终输出。这就是为什么你只从第二次调用中获得结果的原因，因为那是管道中的最后一个函数（最后一个函数 returned 一个值）。

例如：让我们检查一下

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中的最后一个函数，returns 50，不仅是sum()的return值，也是整个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

谢谢，这很有效，管道的解释清除了我的很多问题。地图功能完美地工作，尽管我只需要在另一个管道中说唱它。更新了下面的代码，再次感谢您的帮助，非常感谢。

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

}

Answer 3

我在这里可能是错的，但双管道听起来没有必要。利用粗箭头语法括号隐式 return 我完成了这项工作。

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

让我知道是否有关于其他答案的警告。 #concatMapKindaRocks

Angular - RxJS ConcatMap - Return 来自两个服务调用的数据

Angular - RxJS ConcatMap - Return Data From Both Service Calls

service

rxjs

concatmap