响应式编程之 learn RxJS from scratchRxJS核心概念

Posted 2021-04-30 小柴的修仙之路

抬出一张RxJS的logo帮我镇住场子，免得你们说我不配图。

数据与过程

在javascript中，数据包括：字符串、数值、布尔值、null、undefined、对象。

一个处理数据的过程可被抽象为函数，它接收数据、处理数据、返回数据；调用函数时可以传入数据，而调用表达式本身就代表了函数的return值。因此，一个函数可以是数据的消费者，也可以是数据的生产者。

众所周知，数据是流动的。从一个函数流入另一个函数，经过运算后返回给调用者。

举例：

function a (  num  )  {

       return   num + 1;

}

function b ( num ){

     return a ( num ) + 1;

}

console.log ( b ( 3 ) );

这一整段代码是一个过程；

函数a和b都是过程，它们接收一个数值，经过运算后输出一个数值。如果把a和b拟人化，很明显，a和b在整个过程中扮演的角色有：数据的消费者、数据的生产者。说是很明显，但事实上，并不那么明显。由于函数的定义和使用常常是分隔开的，你很难追踪在各个函数中传递的数据，很难分清各个函数在整个过程中扮演着什么角色，从数据流动的角度看，这个过程是极其糟糕的。

既然数据是流动的，何不设计一条处理数据的“流水线”呢？

想象一下，如果把数据的流动过程抽象成一条“流水线”，你可以清楚的看到数据是如何作为生产材料加入这条流水线的，流水线上有各种强大的”工位“，你很容易就看出数据”原材料“是如何被加工，又如何由上流的”工位“传入下流的”工位“，又有哪些”原材料“是在某个”工位“上加入的。”原材料“从它的源头，流过流水线，最终抵达”消费者“手中，这个过程就是数据流动的过程，一目了然！这一切RxJS都帮你做好了，是否感到相见恨晚？这就是RxJS的强大之处！

RxJS核心概念之可观察对象

可观察对象即 observable，在RxJS中，是Observable类的实例。observable具有以下行为特征：

1、可生产数据

一个observable必须具有它生产数据的方法，称为订阅函数。

2、可推送数据

一个observable可以把它生产出的数据推送出去。既然可以推送数据，那么推送给谁呢？

3、可被订阅（.subscribe方法）

一个observable必须可被订阅，订阅者称为observer(观察者)，它可以接收数据。 一次订阅操作好比生成一份合同，observable和observer就是甲方和乙方，此后，若合同仍然有效，observable就负责把数据推送给observer。

RxJS核心概念之观察者

观察者即observer，具有以下行为特征：

1、可接受数据

一个observer必须有一个.next方法供observable推送数据。

2、可接受数据传输完成的信号

一个observer必须实现一个.complete方法，供observable完成推送时调用。

3、可接受observable发出的错误信号

一个observer必须实现一个.error方法，供observable在错误发生时推送错误信息。

RxJS核心概念之订阅

一个可观察对象和一个观察者需要通过一次订阅行为联系起来，我们说一个observer订阅了一个observable。订阅时，你可以为一个观察者绑定三个回调函数，分别对应观察者的.next、.complete和.error方法。回调函数规定了观察者接收到数据后处理数据的行为。

总览

以上就是RxJS的最核心概念了，那么这几个概念又是如何关联、运作起来的呢？

通过调用可观察对象的.subscribe方法来发起订阅行为，这时你可以在.subscribe的参数里指定观察者的.next、.complete和.error三个方法对应的回调函数； 订阅行为将返回一个subscription对象，包含了取消订阅的.unsubscribe方法。 

订阅行为发生时，立即调用可观察对象的订阅函数，订阅函数接收一个观察者为参数， 通过调用观察者的.next方法可以推送任意值， 通过调用观察者的.error方法可以推送错误信息， 通过调用观察者的.complete方法可以完成推送， 调用.error或.complete方法后，再调用观察者的其他方法将被忽略。也就是说，在此之前，你可以以任意姿势调用.next方法来推送任意值（同步或异步或两者兼具）。

订阅函数实现了数据的生产这一动作，这个动作也许是无限的，比如使用计时器发起的轮询，在某个时机下（具体视需求而定），我们可能要终止此次订阅，与此同时要结束订阅函数内的无限动作，以节省计算资源。

如何实现这一功能？你可以在订阅函数内return一个取消订阅函数或者一个包含了取消订阅方法的对象。调用subscription.unsubscribe方法时会调用订阅函数返回的取消订阅函数，你可以在这个函数内部来清除无限动作。

同步与异步

        前面说到，你可以以任意姿势调用observer.next方法来推送任意值，同步或异步或两者兼具，所以，不能笼统的说RxJS就是用来处理异步操作的！

Observable 与 function 比较

相似：都是懒运行的。function需要调用才运行;而Observable需要订阅才运行。

不同：返回值数量不同。function一次调用只能返回一个值。而Observable每次可以通过.next()传递多个值。

好了，以上就是本篇文章的全部内容。是不是感觉很晕？没关系，下篇文章将会从Observable的创建、订阅、执行、后期四个方面更加细致的深入分析和解剖，保证你轻松掌握。