【Rxjs】 - 解析四种主题Subject

前端之家收集整理的这篇文章主要介绍了【Rxjs】 - 解析四种主题Subject前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

引言

开发ngx(angular 2+)应用时,基本上到处都会用到rxjs来处理异步请求,事件调用等等。所以经常会使用Subject来处理源源不断的数据流,比如input text change,toast notification等等。
这都要依赖于Subject本身既可以是Observable也可以是Observer,也就是说subject既可以作为一个数据源,也可以本身成为一组订阅者的代理
但当处理更加复杂的业务需求时,仅仅用Subject可能无法满足要求,这个时候就考虑一下rxjs提供的其他Subject Class了, 例如BehaviorSubject ReplaySubject AsyncSubject,接下来我们就来看一下他们跟Subject有什么区别,各自有什么特点,在什么时候更适合使用。

[文中代码均使用typescript]

Subject

首先我们来创建一个Rxjs Subject,数据的类型是number

let subject1: Subject<number> = new Subject<number>();  // (A)

然后我们使用Subjectnext方法emit(发射)1条数据

subject1.next(100); (B)

接下来对subject1创建两个订阅,在subscription中直接打印接受到的数据

subject1.subscribe((res: number) => console.info("subjectA ",res));  // (C)
 subject1.subscribe((res: number) => console.info("subjectB ",res));

接下来我在发射两条数据

subject1.next(200); (D)
 subject1.next(300);

好了,接下来我们就来看看console里面会打印出什么结果。
也许有的同学会觉得结果是这样的,因为Subject可以接收源源不断的数据嘛,所以无论发射多少次数据,订阅者都能接收到。

//output
subjectA 100
subjectB 100
subjectA 200
subjectB 200
subjectA 300
subjectB 300

这个结果不太对
因为Subject订阅者只有在订阅后,才能接收到数据源发射过来的值。
所以在代码C中, 订阅者在订阅数据源subject1之前, 无论代码B执行多少次, 订阅者也只能收到代码C之后发射的数据。

正确的结果应该是:

//output
subjectA 200
subjectB 200
subjectA 300
subjectB 300

这种情况在项目里经常能遇到,有时候我明明从数据源发射一个数据,但在订阅者拿到的值却是undefined或者null,这就是因为订阅者是在数据源发射之后创建的,自然无法接收到数据了。
假如我们想在订阅者创建之后,无论什么时候都能拿到数据, 这应该怎么办呢? 那就要考虑使用BehavIoUrSubject了。

BehaviorSubject

我们依旧使用刚才的例子, 创建一个BehaviorSubject,默认值设为0. BehaviorSubject需要给个默认值
然后发射一条数据100,创建一个订阅者,再发射一条数据200,再创建一个订阅者,最后发射一条数据300。
代码如下:

let subject2: BehaviorSubject<number> = new BehaviorSubject<number>(0);
subject2.next(100);
subject2.subscribe((res: number) => console.info("behavior-subjectA ",res));
subject2.next(200);
subject2.subscribe((res: number) => console.info("behavior-subjectB ",res));
subject2.next(300);

这个时候结果就应该是:

//output
behavior-subjectA 100
behavior-subjectA 200
behavior-subjectB 200
behavior-subjectA 300
behavior-subjectB 300

由于BehaviorSubject是可以存储最后一条数据或者初始默认值的, 所以无论订阅者什么时候订阅到数据源subject2上,都能接收到数据。
所以针对订阅behavior-subjectA,他订阅的时候,数据流里最后一条数据是100,他能立即接收到。 然后依次能接收到最新的数据200300
针对订阅behavior-subjectB,他订阅的时候,数据流里最后一条数据是200,他能立即接收到。 然后只能能接收到最新的数据300了。

BehaviorSubject给予我们的便利就是,无论何时订阅到数据源,始终都能拿到最新的或者初始的数据,但也只能拿到一条数据,但当我们处理input text change事件时,需要拿到用户输入的所有字符,也就是数据流的所有数据,BehaviorSubject就无能为力了,这个时候我们考虑使用ReplaySubject了。

ReplaySubject

我们依旧使用刚才的例子, 创建一个ReplaySubject,发射两条数据100和200,创建一个订阅者,再发射一条数据300,再创建一个订阅者,最后发射一条数据400。
代码如下:

let subject3: ReplaySubject<number> = new ReplaySubject<number>();
subject3.next(100);
subject3.next(200);
subject3.subscribe((res: number) => console.info("replay-subjectA ",res));
subject3.next(300);
subject3.subscribe((res: number) => console.info("replay-subjectB ",res));
subject3.next(400);

控制打印的结果将是:

//output
replay-subjectA 100
replay-subjectA 200
replay-subjectA 300
replay-subjectB 100
replay-subjectB 200
replay-subjectB 300
replay-subjectA 400
replay-subjectB 400

ReplaySubject会存储数据流中的所有数据无论何时订阅subject3订阅者都能获取订阅之前数据流里的所有数据,然后依旧获取到接下来获取的到的新数据。
就像ReplaySubject类名的中Replay,一旦订阅到数据源,就会将数据流像放电影一样重新放一遍给你。

订阅replay-subjectA订阅subject3的时候,数据流里已经有了100和200, 接收并打印出来。
最后打印新数据300和400.
订阅replay-subjectB订阅subject3的时候,数据流里已经有了100,200,300, 接收并打印出来。最后打印新数据400.

接下来就要说下最后一种Subject了,也就是AsyncSubject

AsyncSubject

AsyncSubjectBehaviorSubject`ReplaySubject`有些类似,但不同的是AsyncSubject只会存储数据流里的最后一条数据, 而且只有在数据流complete时才会将值发布出去
AsyncSubject主要是用来处理异步操作,当数据源是异步请求或者事件处理时,可能会发射出很多数据,如果我们只希望数据源的异步操作完成的时候,订阅者才能接收到值,这个时候就可以使用AsyncSubject了。
接下来我们看个例子,
创建一个AsyncSubject, 然后发射数据,创建订阅者,再发射数据。。。

let subject4: AsyncSubject<number> = new AsyncSubject<number>();
subject4.next(100);
subject4.next(100);
subject4.subscribe((res: number) => console.info("async-subjectA ",res));
subject4.next(300);
subject4.subscribe((res: number) => console.info("async-subjectB ",res));
subject4.next(400);
subject4.subscribe((res: number) => console.info("async-subjectC ",res));
subject4.complete();
subject4.subscribe((res: number) => console.info("async-subjectD ",res));
subject4.next(500);

最后的结果就应该是:

//output4
async-subjectA 400
async-subjectB 400
async-subjectC 400
async-subjectD 400

由于subject4AsyncSubject,只有在complete的时候才会向订阅publish数据,而且只publish最后一次数据,所以无论订阅者何时订阅数据源,都可以接收到最后一次数据。
但为什么没有打印出500呢,因为数据源已经complete了,你就无法再发射新数据了。

总结

最后来总结一下四种Subject的特点,理解好的各自的特点,在项目开发中可以处理很多棘手的需求,同时也会避免很多问题的发生。

原文链接:https://www.f2er.com/angularjs/145344.html

猜你在找的Angularjs相关文章