Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
RxJS
- **Reactive Extensions for JavaScript,**RxJS 是一个库,它通过使用 observable 序列来编写异步和基于事件的程序;
Subject
Subject
是用于多播的Observable
,这意味着Subject
确保每个订阅都获得与订阅者之间共享可观察执行完全相同的值
Subject
Subject
其实是观察者模式的实现,所以当观察者订阅Subject
对象时,它会把订阅者添加到观察者列表中,每当有接收到新值时,它就会遍历观察者列表,依次调用观察者内部的next
方法,把值一一送出。
import { Subject } from 'rxjs';
const subject$ = new Subject<number>();
subject$.next(1);
// Subscriber A
subject$.subscribe((value:number)=>{
console.log(`订阅者A,订阅值为:${value}`);
})
subject$.next(2);
// Subscriber B
subject$.subscribe((value:number)=>{
console.log(`订阅者B,订阅值为:${value}`);
})
subject$.next(3);
// 控制台输出为:
// 订阅者A,订阅值为:2
// 订阅者A,订阅值为:3
// 订阅者A,订阅值为:3
- 我们创建了一个
Subject
- 发出了一个值
1
,但由于此时并没有订阅者,所以这个值不会被订阅到 - 创建了订阅者 A
- 又发出一个值
2
,这时候订阅者 A 会接收到这个值 - 又创建一个订阅者 B
- 最后发出一个值
3
,这时候已经订阅的都会接收到这个值
BehaviorSubject
如果当前有一个新的订阅,我们希望Subject
能立即给出最新的值,而不是没有回应。
BehaviorSubject
继承自Subject
,它具有存储当前值的特征。表示你可以始终直接从BehaviorSubject
获取到最后发出的值。
import { BehaviorSubject } from 'rxjs';
const behavior$ = new BehaviorSubject<number>(0);
// Subscriber A
behavior$.subscribe((value:number)=>{
console.log(`订阅者A,订阅值为:${value}`);
})
behavior$.next(1);
// Subscriber B
behavior$.subscribe((value:number)=>{
console.log(`订阅者B,订阅值为:${value}`);
})
behavior$.next(2);
// 控制台输出为:
// 订阅者A,订阅值为:0
// 订阅者A,订阅值为:1
// 订阅者B,订阅值为:1
// 订阅者A,订阅值为:2
// 订阅者B,订阅值为:2
- 首先创建了一个
BehaviorSubject
的实例behavior$
,并在实例化时传入初始值0
。然后订阅了这个实例behavior$
,由于BehaviorSubject
的特点是把最新的值发布给订阅者,订阅者 A 会得到初始值0
,所以就会打引出订阅者A,订阅值为:0
; behavior$
使用内置的next
方法发出一个新的值1
,这时候订阅者 A 将会收到新的值,打印出订阅者A,订阅值为1
;- 我们增加一个订阅者 B,这时候它会得到最新的值
1
,所以打印结果为订阅者B,订阅值为1
; - 最后再一次调用
behavior$
的next
方法,由于我们之前已经订阅了两次,所以订阅者 A 和订阅者 B 都会接收到新的value
;
ReplaySubject
创建一个Subject
,但又想在每次新的订阅时,它都会重新发送最后几个值,这个时候就可以用到ReplaySubject
;
ReplaySubject
可以将旧数据发送给新的订阅者,这点很像是BehaviorSubject
,但是它还有一个额外的特性,它可以记录一部分的observable
执行,所以它可以存储多个旧值并发送给它的新订阅者。
创建ReplaySubject
时,可以指定要存储多少值以及要存储多长时间。它的第一个参数 bufferSize
指定了缓存的大小,默认为 Infinity
,即缓存所有发出的值,是一个**「空间限制」。还可以向其传递第二个参数 windowTime
,指定缓存的「时间限制」**,默认为 Infinity
,即不限制值的失效时间。
import { ReplaySubject } from 'rxjs';
const replay$ = new ReplaySubject<number>(2);
// Subscriber A
replay$.subscribe((value:number)=>{
console.log(`订阅者A,订阅值为:${value}`);
})
replay$.next(1);
replay$.next(2);
replay$.next(3);
// Subscriber B
replay$.subscribe((value:number)=>{
console.log(`订阅者B,订阅值为:${value}`);
})
replay$.next(4);
// 控制台输出为:
// 订阅者A,订阅值为:1
// 订阅者A,订阅值为:2
// 订阅者A,订阅值为:3
// 订阅者B,订阅值为:2
// 订阅者B,订阅值为:3
// 订阅者A,订阅值为:4
// 订阅者B,订阅值为:4
- 创建了一个
ReplaySubject
的实例replay$
,并指定我们只想存储最后两个值 - 创建了一个订阅者 A
- 调用三次
replay$
的next
方法,把值发布给订阅者。这时订阅者 A 将会打印三次 - 现在就来体验
ReplaySubject
的魔力。我们使用replay$
创建了一个新的订阅者 B,由于我们告诉ReplaySubject
,存储两个值,因此它将直接向订阅者 B 发出这些最后的值,订阅者 B 将打印出这些值。 replay$
发出另外一个值,这时候,订阅者 A 和订阅者 B 都接收到值的改变,打印出另外一个值
import { ReplaySubject } from 'rxjs';
const replay$ = new ReplaySubject<number>(2,100);
// Subscriber A
replay$.subscribe((value:number)=>{
console.log(`订阅者A,订阅值为:${value}`);
})
let num = 0;
setInterval(()=> replay$.next(num++),200);
// Subscriber B
setTimeout(()=>{
replay$.subscribe((value:number)=>{
console.log(`订阅者B,订阅值为:${value}`);
})
},1000);
// 控制台输出为:
// 订阅者A,订阅值为:0
// 订阅者A,订阅值为:1
// 订阅者A,订阅值为:2
// 订阅者A,订阅值为:3
// 订阅者A,订阅值为:4
// 订阅者B,订阅值为:4
// 订阅者A,订阅值为:5
// 订阅者B,订阅值为:5
// ...
- 创建了
ReplaySubject
,并指定它只存储最后两个值,但是不超过 100ms - 创建一个订阅者 A
- 开始每 200ms 发出一个新的值。订阅者 A 会接收到发出的所有值
- 我们创建一个订阅者 B,由于是在 1000ms 后进行订阅。这意味着在开始订阅之前,
replay$
已经发出了 5 个值。在创建ReplaySubject
时,我们指定最多存储 2 个值,并且不能超过 100ms。这意味着在 1000ms 后,订阅者 B 开始订阅时,由于replay$
是 200ms 发出一个值,因此订阅者 B 只会接收到 1 个值
首先概念上的区别是本质的,ReplaySubject
只是缓存了最近的值,它仍然反映的是不断有值产生的流(「多值」),而BehaviorSubject
反映的则是随时间变化的值(「单值」)。
因此,BehaviorSubject
需要传入一个初始值,然后这个值将不断变化,我们只能看见当前的值。
在行为上,由于ReplaySubject
侧重于缓存,那么当它完成时,并不会影响我们继续观测它缓存的值。
import { ReplaySubject, BehaviorSubject } from 'rxjs';
const replay$ = new ReplaySubject<number>(2);
replay$.next(1);
replay$.next(2);
replay$.next(3);
replay$.complete();
replay$.subscribe((value:number)=>{
console.log(`replay订阅者,订阅值为:${value}`);
})
// 控制台输出为:
// replay订阅者,订阅值为:2
// replay订阅者,订阅值为:3
const behavior$ = new BehaviorSubject<number>(0);
behavior$.subscribe((value:number)=>{
console.log(`behavior订阅者A,订阅值为:${value}`);
})
behavior$.next(1);
behavior$.complete();
behavior$.subscribe((value:number)=>{
console.log(`behavior订阅者B,订阅值为:${value}`);
})
// 控制台输出为:
// behavior订阅者A,订阅值为:0
// behavior订阅者A,订阅值为:1
ReplaySubject
在执行完complate
时,订阅它仍然可以拿到缓存的值,而BehaviorSubject
在执行完complate
时,继续订阅它已经没有任何作用了。
AsyncSubject
AsyncSubject
是一个Subject
变体,其中仅Observable
执行的最后一个值发送到其订阅者,并且仅在执行完成时发送(类似于rxjs/operators
里面的last
方法)
import { AsyncSubject } from 'rxjs';
const async$ = new AsyncSubject<number>();
// SubscriberA
async$.subscribe((value:number)=>{
console.log(`订阅者A,订阅值为:${value}`);
})
async$.next(1);
async$.next(2);
// SubscriberB
async$.subscribe((value:number)=>{
console.log(`订阅者B,订阅值为:${value}`);
})
async$.next(3);
async$.complete();
// 控制台输出为:
// 订阅者A,订阅值为:3
// 订阅者B,订阅值为:3
- 创建
AsyncSubject
的实例async$
- 我们通过订阅者 A 进行订阅
async$
发出 2 个值,仍然没有发生变化- 我们创建一个订阅者 B
- 发出新的值,但是两个订阅者都没有任何反应
async$
执行complate
完成,这时候将最后一个值发送给所有订阅者