rxjs(Reactive Extensions for JavaScript)是Javascript的响应式扩展, 响应式的思路是把随时间不断变化的数据、状态、事件等转成可被观察的序列(Observable Sequence)，然后订阅序列中对象的变化，一旦变化，就会执行事先安排好的各种转换和操作。
原文链接
rxjs适用于异步场景，可以用于优化前端交互中的请求、事件。
rxjs特点
- 统一异步编程的规范，不管是Promise、ajax还是事件，通通封装成序列(Observable Sequence)，一旦有异步环节发生变更，观察序列即可截获发生变更的信息。
- 前端业务层和展现层解耦，比如展现层不需要关心指定事件触发时和DOM无关的处理逻辑。同时业务层也能组装异步操作中多个异步逻辑之间的关系，无需暴露给展现层。展现层关心的是：异步操作其中环节的数据变化。
- rxjs开发业务层具有高弹性，高稳定性，高实时性等特点。
rxjs实例概念
- Observable: 可观察的数据序列.
- Observer: 观察者实例，决定何时观察指定数据.
- Subscription: 观察数据序列返回订阅实例.
- Operators: Observable的操作方法，包括转换数据序列，过滤等，所有的Operators方法接受的参数是上一次发送的数据变更的值，而方法返回值称为发射新数据变更.
- Subject: 被观察对象.
- Schedulers: 控制调度并发，即当Observable接受Subject的变更响应时，可以通过scheduler设置响应方式，目前内置的响应可以调用Object.keys(Rx.Subject)查看。
- Observable四个生命周期：创建 、订阅 、 执行 、销毁。
- 创建Obervable，返回被观察的序列源实例，该实例不具备发送数据的能力，相比之下通过new Rx.Subject创建的观察对象实例具备发送数据源的能力。
- 通过序列源实例可以订阅序列发射新数据变更时的响应方法（回调方法）。
- 响应的动作实际上就是Observable的执行。
- 通过序列源实例可以销毁，而当订阅方法发生错误时也会自动销毁。
- 序列源实例的catch方法可以捕获订阅方法发生的错误，同时序列源实例可以接受从catch方法返回值，作为新的序列源实例。
rxjs操作符
rxjs中提供了很多操作符，用于创建Observable对象
import Rx from 'rxjs';
create
let observable = Rx.Observable
.create((observer)=> {
observer.next('hello');
observer.next('world');
});
//订阅Observable
observable.subscribe((value)=> {
console.log(value);
});
输出：hello
world
of
转换值变量
let observable = Rx.Observable.of('hello', 'world');
observable.subscribe({
next: (value)=> {
console.log(value);
},
complete: ()=> {
console.log('complete');
},
error: (error)=> {
console.log(error);
}
});
输出：hello
world
complete
from
转换数组变量
let array = [1, 2, 3];
let observable = Rx.Observable.from(array);
observable.subscribe({
next: (value)=> {
console.log(value);
},
complete: ()=> {
console.log('complete');
},
error: (error)=> {
console.log(error);
}
});
输出：1
2
3
complete
fromEvent
转换事件变量
Rx.Observable.fromEvent(document.querySelector('button'), 'click');
fromPromise
转换Promise(承诺)变量
let observable = Rx.Observable
.fromPromise(new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello world');
},3000)
}));
observable.subscribe({
next: (value)=> {
console.log(value);
},
complete: ()=> {
console.log('complete');
},
error: (error)=> {
console.log(error);
}
});
输出：hello world
complete
empty
empty操作符返回一个空的Observable，订阅该对象，它会立即返回complete信息。
never
never操作符会返回一个无穷的Observable，订阅该对象，什么事情都不会发生，它是一个一直存在却什么都不做的Observable对象。
interval
interval操作符支持一个数值类型的参数，用于表示定时的间隔。
let observable = Rx.Observable.interval(1000);
observable.subscribe({
next: (value)=> {
console.log(value);
},
complete: ()=> {
console.log('complete');
},
error: (error)=> {
console.log(error);
}
});
输出：0
1
2
...
上面代码表示每隔1s，会输出一个递增的值，初始值从0开始。
timer
timer操作符支持两个参数，第一个参数用于设定发送第一个值需等待的时间，第二个参数表示第一次发送后，发送其它值的间隔时间。
let observable = Rx.Observable.timer(1000, 5000);
observable.subscribe({
next: (value)=> {
console.log(value);
},
complete: ()=> {
console.log('complete');
},
error: (error)=> {
console.log(error);
}
});
输出：0 //1s后
1 //5s后
2 //5s后
...
Pull vs Push
Pull和Push是数据生产者和数据消费者两种不同的交流方式
Pull
在Pull体系中，数据的消费者决定何时从数据生产者那里获取数据，而生产者自身并不会意识到什么时候数据将会被发送给消费者。
每个JavaScript函数都是一个Pull体系，函数是数据的生产者，调用函数的代码通过拉出一个单一的返回值来消费该数据。
ES6中的iterator迭代器和generator生成器是另一种Pull体系，调用iterator.next()的代码是消费者，可从中拉取多个值。
Push
在Push体系中，数据的生产者决定何时发送数据给消费者，消费者不会在接收数据之前意识到它将要接收这个数据。
Promise是最常见的Push体系，一个Promise(数据的生产者)发送一个resolved(成功状态)或reject(失败状态)来执行一个回调(数据消费者)，但是不同于函数的地方的是：Promise决定着何时数据才被推送至这个回调函数。
RxJS引入了Observables(可观察对象)，一个全新的Push体系。一个可观察对象是一个产生多值的生产者，当产生新数据的时候，会主动推送给Observer(观察者)。
| 生产者 | 消费者 | |
|---|---|---|
| Pull | 被请求的时候产生数据 | 决定何时请求数据 |
| Push | 按自己的节奏生产数据 | 对接收的数据进行处理 |
Observable vs Promise
| 单值 | 多值 | |
|---|---|---|
| Pull | 函数 | 遍历器 |
| Push | Promise | Observable |
Promise
- 返回单个值
- 不可取消
Observable
- 随着时间的推移发出多个值
- 可以取消
- 支持 map、filter、reduce 等操作符
- 延迟执行，当订阅的时候才会开始执行
