RxJs使用指北

一、出现背景

应响应式编程的需求，出现了 Rx 这样的专门用来处理数据响应式的库。Rx家族有很多: RxJava，RxSwift, Rx.NET等，这里主要介绍 RxJs 的使用。

RxJs 是一个相当灵活的，使用JavaScript语言的数据响应式库。使用相当的灵活，API繁多，学习成本低，用官网的话叫可以把 RxJS 当做是用来处理事件的 Lodash 。

二、关键词

ReactiveX、观察者模式、迭代器模式、函数式编程、数据管道。

三、RxJs特点

1.纯净性 (Purity)：使用纯函数来产生值

下图中，fromEvent便是纯函数，函数的输出不随外部变量的影响

2.流动性 (Flow)：RxJS 提供了一整套操作符来处理数据流动

常用的运算有 filter、delay、debounceTime、throttleTime、take、takeUntil、distinct、distinctUntilChanged

3.以值 (Values)传递：对于流经 observables 的值，你可以对其进行转换。

还是点击事件的例子，下图中的map和scan便可以对流经的数据值进行映射和数值计算

4.Observable (可观察对象)

Rx中一切都是可观察对象，数据值放在可观察对象中。对象通过next方法往数据管道里放入值，在接收端，可以订阅（subscribe）创建出来的同一个可观察对象，通过订阅事件异步地拿到数据变化的内容，并且可以处理传输异常。

下图中可以看出，subscribe被创建时，若管道里有值，他会依次遍历一下各个值（这可以用作局部缓存），并可自定义处理函数。对于宏任务（setTimeout）会延后判断。

上图中，我们也可以看到一个完整的 subscribe 订阅内部的构成。next函数接受管道传值；error接受传值异常后的错误信息；当响应式对象调用complete函数后，执行complete函数，并结束该次订阅。

一般上，subscribe函数调用时，只接受一个参数的话，默认就是next过来的数据值。

与函数、迭代器的区别

• 函数和 Observables 都是惰性运算。如果你不调用函数，就不会执行。Observables 也是如此，如果你不“调用”它(使用 subscribe)，也不会执行

• ES2015 引入了 generator 函数和 iterators (function*)，这是另外一种类型的拉取体系。调用 iterator.next() 的代码是消费者，它会从 iterator(生产者) 那“取出”多个值。

Observable 可以随着时间的推移“返回”多个值，这是函数所做不到的。

学习RxJs，首先得弄懂生产者消费者模式的主被动关系：

生产者	消费者
拉取是被动的: 当被请求时产生数据。	拉取是主动的: 决定何时请求数据。
推送是主动的: 按自己的节奏产生数据。	推送是被动的: 对收到的数据做出反应。

RxJs是主动推送、被动接受模式。管道入口（可订阅对象，比如Subject）强行推送值，在出口处可选择地接受和过滤数据。

示例参考：cn.rx.js.org/manual/over…

四、常用运算符

1.of/from1. of/from1.of/from

将普通对象转换为rxjs可检测的响应式对象

不同点： of订阅后忠实的打印源对象，from会将源对象解构后依次打印。是不是有点像Promise.all ?