让你自由操控「异步事件流」。

接触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的青睐有加可以看出，它是足够优秀的。