Rxjs的理解

Rxjs的理解

1.什么是RxJS

在RxJS官方文档中，rxjs 是使用 Observables 的响应式编程的库，它使编写异步或基于回调的代码更容易

异步：就是书写顺序和执行顺序不同
回调：就是被其他函数（需要传入调用的函数）调用的该函数

异步和回调的含义其实是对输入的处理。而在rxjs中，我们可以把一切输入都当做数据流来处理，比如说：

1. 用户操作
2. 网络响应
3. 定时器

宝石图

为了帮助开发者更容易地理解 ReactiveX 的工作原理，ReactiveX 开发组还设计了一种很形象的图，那就是宝石图。这货长这样（英文注释不必细看，接下来我会简单解释下）：

中间的带箭头的线就像传送带，用来表示数据序列，这个数据序列被称为“流”。上方的流叫做输入流，下方的流叫做输出流。输入流可能有多个，但是输出流只会有一个（不过，流中的每个数据项也可以是别的流）。
数据序列上的每个圆圈表示一个数据项，圆圈的位置表示数据出现的先后顺序，但是一般不会表示精确的时间比例，比如在一毫秒内接连出现的两个数据之间仍然会有较大的距离。只有少数涉及到时间的操作，其宝石图才会表现出精确的时间比例。
圆圈的最后，通常会有一条竖线或者一个叉号。竖线表示这个流正常终止了，也就是说不会再有更多的数据提供出来了。而叉号表示这个流抛出错误导致异常中止了。还有一种流，既没有竖线也没有叉号，这种叫做无尽流，比如一个由所有自然数组成的流就不会主动终止。但是要注意，无尽流仍然是可以处理的，因为需要多少项是由消费者决定的。你可以把这个“智能”传送带理解为由下一个工位“叫号”的，没“叫号”下一项数据就不会过来。
中间的大方框表示一个操作，也就是 operator —— 一个函数，比如这个图中的操作就是把输入流中的条目乘以十后放入输出流中。
看懂了宝石图，就能很形象的理解各种操作符了。

2.RxJS基本写法

创建出来的数据流是一种可观察的序列，这就是Observable (可观察对象)，可以被订阅（subscribe），取消订阅（unsubscribe）

典型的写法

of(1,2,3).pipe(
filter(item=>item % 2 === 1),
map(item=>item * 3),
).subscribe(item=> console.log(item))

它会输出：

3
9

其中 of 称为创建器（creator），用来创建流，它返回一个 Observable 类型的对象，filter 和 map 称为操作符（operator），用来对条目进行处理。这些操作符被当作 Observable 对象的 pipe 方法的参数传进去。诚然，这个写法略显怪异，不过这主要是被 js 的设计缺陷所迫，它已经是目前 js 体系下多种解决方案中相对好看的一种了。
Observable 对象的 subscribe 方法表示消费者要订阅这个流，当流中出现数据时，传给 subscribe 方法的回调函数就会被调用，并且把这个数据传进去。这个回调函数可能被调用很多次，取决于这个流中有多少条数据。
注意，Observable 必须被 subscribe 之后才会开始生产数据。如果没人 subscribe 它，那就什么都不会做。

可以被用来做一些转换操作，比如

1. 改变数据形态：map, mapTo, pluck
2. 过滤一些值：filter, skip, first, last, take
3. 时间轴上的操作：delay, timeout, throttle, debounce, audit, bufferTime
4. 累加：reduce, scan 异常处理：throw, catch, retry, finally
5. 条件执行：takeUntil,delayWhen, retryWhen, subscribeOn, ObserveOn 转接：switch

也可以对若干个数据流进行组合：

1. concat，保持原来的序列顺序连接两个数据流
2. merge，合并序列
3. race，预设条件为其中一个数据流完成
4. forkJoin，预设条件为所有数据流都完成 zip，取各来源数据流最后一个值合并为对
5. combineLatest，取各来源数据流最后一个值合并为数组 在RxJS中，存在这么几种东西：
6. Observable可观察序列，只出不进
7. Observer 观察者，只进不出
8. Subject 可出可进的可观察序列，可作为观察者
9. ReplaySubject 带回放
10. Subscription 订阅关系

3.RxJS主要应用场景

1.用户输入的场景，涉及到debounce防抖，频率控制，input相同值过滤，请求取消，这一套场景，用rxjs处理天下无双，这也是rxjs最适合的场景
2.ajax请求错误失败后重试场景 ，这种做法，我们用promise做很好做，进入失败流后再返回promise流直至请求成功，请求几次也很好控制。但比较难做的是一种被称为指数化退避的试错，这种用rxjs做也是极好的
3.现代框架组件通信的场景。常用框架vue,angular,react都有对应的状态管理框架，非常适合不同组件之间的通信，这是首选的方式，其实用rxjs做也很好，一个 subject管理一个数据，组件只需引入对应的subject就行，就能相互通信。
4.事件处理场景，这一块儿rxjs各种流的合并，过滤操作发挥到极致