我的常用 Rxjs API

这里是我平常会用到的 Rxjs 中的 API。

先介绍 pipe 以及 pipe 中高频使用 Operator

pipe

用于将多个操作符组合在一起,形成一个可复用的数据处理管道的机制。

example

pipe 中的参数类型是 OperatorFunction， map distinctUnitChanged 等都是 OperatorFunction rxjs.dev/api/operato…

Definition of pipe

op1 接受原始类型 T 的数据,并返回类型 A 的数据。 op2 接受 op1 返回的类型 A 的数据,并返回类型 B 的数据。 op3 接受 op2 返回的类型 B 的数据,并返回类型 C 的数据。 op4 接受 op3 返回的类型 C 的数据,并返回类型 D 的数据。 最终,该 pipe() 方法会返回一个 Observable,它会发出类型 D 的数据。

map && switchMap

⚠️ Attention map 在 rxjs 中是映射，并不想 JS 中要求数据源是 Array，两者不一样。

ex for map

switchMap switchMap 和 map相同的地方： 对 Observable 发出的每个值应用一个函数,该函数返回一个新的 Observable。 不同之处：当有更新的 Observable 到来时， switchMap 操作符会取消先前 Observable 的订阅, 只保持最新返回的 Observable 的订阅。 这一点很像 debounce 它们都涉及到取消之前未完成的工作,并开始新的工作。

bufferTime

不是 setTimeout， 虽然也是间隔一段时间后触发。但它是会存储这一段时间收到的数据，到点后发送出去。

fromEvent(document.body, 'click') .pipe( // 每 2500 毫秒收集一次点击事件 bufferTime(2500), // 对收集到的点击事件进行处理 map((clickList) => { console.log('Processed clicks:', clickList.length); // 在这里执行具体的处理逻辑 return clickList; }) ) .subscribe((processedClicks) => { console.log('Processed click list:', processedClicks); });

distinctUntiChanged

1. 订阅 this.currentUnits$ Observable,获取它发出的 Map 对象。
2. 从 Map 对象中提取 type 对应的值。如果没有找到,则返回 null。
3. 使用 distinctUntilChanged() 操作符,确保只有当提取的值发生变化时,才会将其传递给下游订阅者。

takeUntil

它可以用来管理订阅的生命周期。SubA.pipe(takeUntil(SubB)) 的意思是， 订阅者一直 take SubA 数据流，直到 SubB 出现就取消。

startWith

在数据流开始时插入一个或多个初始值。 （并不是字符过滤哦😯） rxjs.dev/api/operato…

Scheduler

控制 Observable 发送值的时机。

merge

将多个 Observable 合并在一起

combineLatest && combineLatestWith

将多个 Observable 的最新值组合成一个新的 Observable。 任意一个 Observable 有新值的时候，将这个值和现有所有 Observable 最近收到的值组合成 array 送出。

rxjs.dev/api/index/f…

官方的例子比较复杂， 可以感受下面这个例子

combineLastestWith 的作用和 combineLastest 完全相同。但是 combineLastestWith 是实例方法，挂载在 Observable 上。

Observe & Observable

• Observable 是"被订阅"的对象,它发出数据。 最常见的 Observable 就是 Subject， Subject extends Observable

• Observer 是"订阅者",它接收并处理从 Observable 发出的数据。

• Observable 需要通过 subscribe() 方法来订阅,订阅者接收数据。

• Subject 同时实现了 Observable 和 Observer 接口,既可以被订阅,也可以主动推送数据。

信息隐藏🫥

在 RxJS 中使用 Subject 时,通常会搭配 asObservable() 方法来返回一个 Observable 的引用

主要是隐藏 Subject 的写入能力，使用 asObservable() 返回的是只读的 Observable 引用,外部只能订阅,无法向 Subject 写入数据, 这样可以更好地控制数据流向。

原文链接：https://juejin.cn/post/7406147963875835944