接触RxJS有一段时间了,也看过很多demo和视频,但是至于怎么运用到自己项目,该替换现有的哪一个模块,还是无从下手。

这是个抽象的话题,但是白话讲:就是一件事情,而且这个事情是复杂的,有流程的。

例如:点击一个按钮 -> 发出一个请求 -> 根据返回判断是否需要继续轮询 -> 或者结束弹出提示框。

这种情况,RxJS是适用的。

话不多说,看代码

基于RxJS6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
* 轮询检查订单状态
* @param orderCode 订单号
* @param state 订单状态
*/
import { interval, Observable } from 'rxjs'
import { map, takeWhile, exhaustMap, filter, take } from 'rxjs/operators'

export function pollingCheckOrderState(orderCode: string, state: OrderState): Observable<IResponse> {
const MAX_TIME = 30
return interval(1000).pipe(
map(x => x + 1), // 记录定时器次数
takeWhile(x => x <= MAX_TIME), // 小于最大次数时流会继续
exhaustMap(() => findOrder(orderCode)), // 转换到下一个流,但是如果之前一个请求没结束,则取消这次请求
filter(res => { // 过滤出符合条件的情况
const { obj: { orderState } } = res
return res.code === HttpFlag.SUCCESS && orderState === state
}),
take(1) // 满足一次即退出
)
}

目前能立马解决项目里的难题就是轮询事件了。

这是一个轮询检查订单状态的例子:

最多30次轮询,每次轮询间隔1s,如果满足条件就取消轮询,并进行后续操作。

以往情况,针对多种条件,取消轮询需要取消定时器对象,就需要在多个地方调用清除,更细节化则要处理HTTP请求节流问题,显得十分繁琐。

此时正是RxJS的用武之地。

畅想

后期会把项目中的React Class逐步迭代到React Hooks,并将HTTP Request由RxJs包装,状态管理也托付给RxJS处理。将会显得更优雅。

不过有一说一,RxJS的学习起初有点难以理解,这对项目内没有接触过的成员来说,上手难度偏高。但是通过Angular对RxJS的青睐有加可以看出,它是足够优秀的。