需求背景:
线上环境已有请求A,现在要添加请求B,在不影响之前A的处理逻辑下,等A和B的请求都结束后,对获取到的数据进行匹配处理。请求A和B都只执行一次。
思路:
根据需求背景可知,合并两个数据,且这两个数据的先后顺序不确定,但又必须等到两个数据都获取到后再执行操作,因此比较合适的有zip和combineLatest;我觉得zip合并的两个数据在逻辑上应该是像拉链一样,需要成对出现的数据(比如数组下标对应一个数组元素这种),这里的A和B实际上是没有这种关系的,因此考虑用combineLatest。
combineLatest的作用:
合并最新的数组,弹珠图如下(图片来源:《深入浅出Rxjs》):
从上图可以看出,当source1$ 和source2$ 都产生一个数据时,combineLatest就开始将二者最新的数据进行合并。
项目代码弹珠图如下:
项目代码示例:
const requestA$ = this.service.search(params).pipe(
map(res => {
// 请求A原先的一些处理逻辑
this.handleData(res, params)
return res // 对应下方res1
})
)
// 获取所有行李额规则的请求
const requestB$ = this.service.getData(params).pipe(
// 项目中用了拦截器,在http请求出错时会抛出错误;
// 为避免请求B的接口影响到接口A的进行,在这里添加错误处理逻辑,返回的data即为下面的res2
catchError(() => {
const data: DataBo = []
return of(data)
}),
)
combineLatest(requestA$, requestB$).subscribe(
res => {
const [res1, res2] = res
// res1、res2对应请求A、B的结果,在这里进行匹配处理
},
err => {
// 错误处理
},
)