RxJS入门和概览

RxJS是Reactive Extensions For JavaScript的简写,它是一个强大的JavaScript Reactive编程库。Reactive是指响应式编程(Reactive Programming)。

什么是响应式编程(Reactive Programming)?

任何异步事件(比如页面鼠标click事件),在响应式编程都是异步事件流。不仅仅是click、hover这种事件,任何变量、用户输入、属性、缓存、数据结构等,响应式编程把所有事物都看成是数据流。数据流是类似数组一样的序列,可以像数组一样,用merge、map、concat等方法操作。简单来说就是:把所有事物都事件流化,然后把这些事件流像数组一样去操作,就是响应式编程。

RxJS提供了各种API来创建数据流:

  • 单值:of, empty, never
  • 多值:from
  • 定时:interval, timer
  • 从事件创建:fromEvent
  • 从Promise创建:fromPromise
  • 自定义创建:create

创建出来的数据流,是一种类似数组一样的序列,可以被订阅,也可以用如下API操作控制:

  • 改变数据形态:map, mapTo, pluck
  • 过滤一些值:filter, skip, first, last, take
  • 时间轴上的操作:delay, timeout, throttle, debounce, audit, bufferTime
  • 累加:reduce, scan
  • 异常处理:throw, catch, retry, finally
  • 条件执行:takeUntil, delayWhen, retryWhen, subscribeOn, ObserveOn
  • 转接:switch
  • concat,保持原来的序列顺序连接两个数据流
  • merge,合并序列
  • race,预设条件为其中一个数据流完成
  • forkJoin,预设条件为所有数据流都完成
  • zip,取各来源数据流最后一个值合并为对象
  • combineLatest,取各来源数据流最后一个值合并为数组

查看更多

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数据。



查看更多