RxJS: 热流和冷流

2021-08-02

在 RxJS 里,Observable 有热流和冷流之分,它们的区别在于 数据工厂是否独立于订阅状态。那么将简单的介绍一下,什么热流和冷流。

冷流(Cold Observable)

冷流意味着数据工厂就是流本身,比如:offromrangeintervaltimer,这些操作符输出的流都是冷流。

举一个简单的例子:

javascript

当这个冷流被多次订阅的情况下,数据都会重新发送一遍给每一个订阅者,他们都会获得一组独立的数据。

javascript

热流(Hot Observable)

热流意味着数据生产者与流是独立的,比如:fromEvent,它们依赖于外部的用户事件(点击、鼠标移动等)等可以持续产生数据的生产者。流的订阅与否不会影响这些数据的生产,如果这个流没有订阅,那么数据生产后,这个数据会丢失。

下面是一个鼠标点击事件的热流:

javascript

现在,创建两个订阅者:

javascript

这样,第二个流会丢失掉前四秒的数据。

冷流加热

有时候,你可能会需要把冷流表现得像热流一样,比如你想从网络上获取一些数据,每4秒重新获取一次。

javascript

现在,如果我们给这个流多次订阅,那么每个订阅每4秒都会进行一次新的请求。

javascript

那么显然,多出来的一次请求是不必要的,这个时候,你需要把流“加热”,让数据请求不再依赖于订阅者,那么你只需要在 pipe 中加上 share

javascript

热流降温

为了能够让热流变冷,需要让每一条热流只能监听一个订阅者,那么我们可以这么做:

javascript

小结

本文介绍了冷热关系以及他们之间的转化方式,后续会更加详细的介绍多播和单播跟冷热流之间的关系。