RxJS：Cold vs Hot Observables

分享

RxJS中Observables分为两种：Cold Observables和Hot Observables，这两个到底有什么区别呢？我们先来看下RxJS官方给出的解释：



Cold observables start running upon subscription, i.e., the observable sequence only starts pushing values to the observers when Subscribe is called. (…) This is different from hot observables such as mouse move events or stock tickers which are already producing values even before a subscription is active.


翻译过来就是：

  • Cold Observables只有被observers订阅的时候，才会开始产生值。是单播的，有多少个订阅就会生成多少个订阅实例，每个订阅都是从第一个产生的值开始接收值，所以每个订阅接收到的值都是一样的。

  • Hot Observables不管有没有被订阅都会产生值。是多播的，多个订阅共享同一个实例，是从订阅开始接受到值，每个订阅接收到的值是不同的，取决于它们是从什么时候开始订阅。

单看文字解释，还是不太能理解，那自己先动手写几个Observables看看。具体代码在这里：angular-rxjs

查看更多 →

RxJS：四种Subject的用法和区别

分享

在RxJS中有四种Subject分别是：Subject，BehaviorSubject，AsyncSubject，ReplaySubject；这四种Subject都是特殊的Observable。

在介绍它们之前，我们先来看下这四种Subject与普通Observable的区别：

Observable Subject BehaviorSubject AsyncSubject ReplaySubject
Cold Hot Hot Hot Hot
数据生成者 数据生成者和消费者 数据生成者和消费者 数据生成者和消费者 数据生成者和消费者
单播 多播 多播 多播 多播
每次从头开始把值发给观察者 将值多播给已注册监听该 Subject 的观察者们 把最后一个值（当前值）发送给观察者（需要初始值） 执行的最后一个值发送给观察者相当于last() 可以把之前的值发送给观察者（错过的值）

查看更多 →

RxJS：如何通过RxJS实现缓存

分享

在这篇文章中会介绍以下内容：

  • Angular中通过HttpClient执行Http Request返回的Observables是Cold Observable。

  • HttpClient Observable每次被订阅都需要调用http request，对于公用的API返回同样的值，在不同页面重复调用会浪费http资源降低性能。

  • 如何通过ReplaySubject实现缓存效果，提高性能。

查看更多 →

RxJS：如何通过RxJS实现简单的消息通知机制

分享

在上一篇文章【RxJS：如何通过RxJS实现缓存】里介绍了如何在Anuglar2+中结合HttpClient和ReplaySubject缓存API Response数据，减少重复调用API从而提高性能，这种方法适用于每次返回的Response数据都不变的常量API。在实际开发过程中，还有一种API返回的值随着时间会有变化，这个时候就需要去更新RxJS缓存里的值，从用户体检的角度出发，先在页面显示一个消息通知用户数据有更新，让用户选择是否需要更新页面内容，而不是直接在每次缓存更新以后直接刷新页面数据。接下来就来介绍如何基于RxJS实现简单的消息通知机制。


这篇文章里用到的RxJS缓存都是指在Anuglar2+中结合HttpClient和ReplaySubject缓存API Response数据，后续新的订阅者都可以直接从ReplaySubject拿API Response数据。



查看更多 →

RxJS：所有订阅都需要调用unsubscribe取消订阅？

分享

最开始用RxJS的时候，看官方文档对Subscription的介绍如下：



What is a Subscription? A Subscription is an object that represents a disposable resource, usually the execution of an Observable. A Subscription has one important method,unsubscribe, that takes no argument and just disposes the resource held by the subscription


从此用RxJS订阅的时候，时刻都不忘调用unsubscribe()以防内存泄漏。对于结束Observable，释放内存的方式有三种方式：

  • 第一种，Observable完成值的发送，执行Observable.onComplete()

  • 第二种，Observable发生错误，执行Observable.OnError()

  • 第三种，订阅者主动取消订阅，执行subscription.unsubscribe()

对于Observable.onComplete()和Observable.OnError()，RxJS自身会处理这两种情况，所以不需要在代码里再手动取消订阅释放内存。对于第三种方式，Observable还在源源不断的发送值，订阅者想主动取消订阅，那就需要在代码里调用unsubscribe()取消订阅释放内存。

那么显然在代码中，并不是所有的Observable都需要手动调用unsubscribe()取消订阅。

查看更多 →