【Rxjs】 - 解析四种主题Subject
引言开发ngx(angular 2+)应用时,基本上到处都会用到 [文中代码均使用 Subject首先我们来创建一个 let subject1: Subject<number> = new Subject<number>(); // (A) 然后我们使用 subject1.next(100); (B) 接下来对 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里面会打印出什么结果。 //output subjectA 100 subjectB 100 subjectA 200 subjectB 200 subjectA 300 subjectB 300 这个结果不太对 正确的结果应该是: //output subjectA 200 subjectB 200 subjectA 300 subjectB 300 这种情况在项目里经常能遇到,有时候我明明从数据源发射一个数据,但在订阅者拿到的值却是 BehaviorSubject我们依旧使用刚才的例子, 创建一个 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 由于
ReplaySubject我们依旧使用刚才的例子, 创建一个 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
订阅者 接下来就要说下最后一种Subject了,也就是 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 由于 总结最后来总结一下四种 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |