Rxjs实战之combineLatest_rxjs combinelatest

需求背景：

线上环境已有请求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 => {
        // 错误处理
      },
    )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25