级联映射后映射

Question

我有以下可观察到的：

existingFormData$: Observable<any> = this.activatedRoute.params.pipe(
    map(params => params['id']),
    filter(id => !!id),
    switchMap((id: string) => this.httpService.getUniversityApplicationsDetail(id)),
    concatMap((detail: any) => this.httpService.getUniversityApplicationsFeesOptions(detail.meta.university.id)),
    tap((detail: any) => {
      console.log(detail)
    })
  );

我正在查找地址栏中包含的id，调用第一个api，从第一个api获得一个id值，并将其发送到第二个api。这两个apis都返回一个对象。concatMap是正确的运算符吗？在“我的网络”选项卡上查找似乎很有效。

我遇到的问题是，这两个apis的结构完全相同。如何构造如下所示的一个对象：

{
    apiOne: apiOne,
    apiTwo: apiTwo
}

Answer 1

您可以通过在第二个调用之后添加另一个管道来组合来自这两个调用的结果。这允许您的两个响应变量位于相同的范围内，因此您可以从这两个值形成一个对象。

该技术将在更详细的here中进行解释。

existingFormData$: Observable<any> = this.activatedRoute.params.pipe(
    map(params => params['id']),
    filter(id => !!id),
    switchMap(id => this.httpService.getUniversityApplicationsDetail(id)),
    switchMap(detail => this.httpService.getUniversityApplicationsFeesOptions(detail.meta.university.id).pipe(
        map(options => ({ detail, options }))
    )),
    tap(obj => {
      console.log(obj)
    })
  );

注意:如果您的服务方法只发出一个值，那么使用concatMap或switchMap并不重要，其行为将是相同的。当一个可观察到的值发出多个值时，这种差异就会起作用。

• concatMap将在订阅next
• switchMap之前等待第一个内部源完成，一旦接收到新的发射(不等待完成)，next
• switchMap将从当前内部源取消订阅)