RxJS中concatMap使用合理性及合并双API返回对象的方法

1. concatMap用得合适吗？ #

你这个场景是串行依赖的API调用——第二个API得用第一个返回的detail.meta.university.id才能发起请求，concatMap本身是能正常工作的，但得清楚它的行为特点：

• concatMap会按顺序处理每个上游值，必须等前一个内部请求（也就是第一个API调用）完成，才会处理下一个。如果路由参数id频繁变化，concatMap会把所有请求排队执行，哪怕新的id已经出现，旧的请求没完成也会继续跑。
• 如果你的需求是：路由id变化时，直接取消之前没完成的API请求，那switchMap更合适——它会在新的参数到来时，自动取消前一个未完成的请求订阅。

所以如果只是单一路由参数的加载场景（用户不会频繁切id），concatMap完全没问题；但要处理参数快速变化的情况，switchMap更符合常规需求。

2. 合并两个API的返回结果 #

要把两个API的结果合并成你要的格式，得在调用第二个API时保留第一个的返回值，最后把两者组合起来。修改后的代码如下：

existingFormData$: Observable<any> = this.activatedRoute.params.pipe(
    map(params => params['id']),
    filter(id => !!id),
    // 用switchMap（或换成你原来的concatMap），先调第一个API，再在内部调第二个API，同时保留第一个的结果
    switchMap((id: string) => 
        this.httpService.getUniversityApplicationsDetail(id).pipe(
            switchMap(apiOne => 
                this.httpService.getUniversityApplicationsFeesOptions(apiOne.meta.university.id).pipe(
                    // 把两个结果合并成目标格式
                    map(apiTwo => ({ apiOne, apiTwo }))
                )
            )
        )
    ),
    tap(combinedData => {
        console.log(combinedData); // 现在输出的就是合并后的对象
    })
);

另外建议别用any类型，尽量定义具体的接口，这样代码更易维护。

内容的提问来源于stack exchange，提问作者Andrew Howard