rxjs with angular

不念不忘少年蓝@ 2023-06-25 02:26 56阅读 0赞

**=》Promise vs Observable**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

--------------------

observable.subscribe() : 请给我任意数量的值，无论同步还是异步。

rxjs的数组操作符可以把异步事件作为集合来处理。

observables(可观察对象)以惰性的方式推送多值的集合。=》只有订阅的时候数据才会流动。而angular模板里的asyncPipe直接填入的值是一个observable，为什么会有数据呢，因为asyncPipe主动帮我们subscribe（订阅）了。

订阅一个可观察对象类似于调用一个函数，是将其推入栈中。Observable的执行可能会是无限的，如果不取消订阅observable就会一直占用内存。

当调用了observable.subscribe()，观察者会被附加到observable执行中，这个调用返回一个对象，即subscription（订阅）。subscription表示进行中的执行，只要调用unsubscribe()方法就可以取消执行。

**angular 中何时取消订阅observable？**

[https://netbasal.com/when-to-unsubscribe-in-angular-d61c6b21bad3][https_netbasal.com_when-to-unsubscribe-in-angular-d61c6b21bad3]

（一个强调：通过4中subject在各个component之间通信，它们都是hot observable，hot observable不管有没有被订阅都会源源不断的发送值。必须手动取消订阅。一般在钩子函数ngOnDestory中取消订阅。）

**为什么要尽可能少的调用unsubscribe() 去取消订阅？**

[https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87][https_medium.com_benlesh_rxjs-dont-unsubscribe-6753ed4fda87]

Summary: Use takeUntil, takeWhile, et al.

onDestroy$: Subject<any> = new Subject();
    onMount() {
        this.subscription = this.data$.takeUntil(this.onDestroy$).subscribe(data =>this.updateData(data));
        }
      ngOnDestroy(): void {
        this.onDestroy$.next();
      }

angular 管道扩展阅读：

[https://blog.csdn.net/wf19930209/article/details/79372098][https_blog.csdn.net_wf19930209_article_details_79372098]

observable 冷热模式：

[https://segmentfault.com/a/1190000011052037][https_segmentfault.com_a_1190000011052037]

Hot Observables在被订阅之前就已经开始产生数据，例如`mouse move`事件。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191224173837101.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24=,size_16,color_FFFFFF,t_70
[https_netbasal.com_when-to-unsubscribe-in-angular-d61c6b21bad3]: https://netbasal.com/when-to-unsubscribe-in-angular-d61c6b21bad3
[https_medium.com_benlesh_rxjs-dont-unsubscribe-6753ed4fda87]: https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87
[https_blog.csdn.net_wf19930209_article_details_79372098]: https://blog.csdn.net/wf19930209/article/details/79372098
[https_segmentfault.com_a_1190000011052037]: https://segmentfault.com/a/1190000011052037