JavaScript中rxjs与 Observable 两大类操作符解析

前言

Observable 产生的数据需赋予开发者充分自由，以便执行 map/transform 等各类处理，这正是 Rxjs Operator 的用武之地。

运算符为操作 Observable 并返回新 Observable 的函数，支持运算符链式调用。链中每个运算符均基于前一个运算符产生的 Observable 进行修改。

链式运算符按顺序执行而非并行，每个运算符作用于前一个运算符生成的 Observable。

通过 subscribe 运算符完成订阅，该操作允许观察者连接 Observable。观察者需先订阅才能从 Observable 获取数据或错误。

Rxjs 中的 Operator 划分为两大类。

1. 可加入 pipe 链式操作的 Operator

可管道运算符支持链接，属于纯函数，接收 Observable 作为输入并返回 Observable 作为输出。

伪代码如下：

observeable.pipe(
  operator1(),
  operator2(),
  operator3(),
  operator3(),
)

operator1 接收 observable 并执行操作后发出新的 observable。该新 observable 作为输入传递给 operator2，后续运算符依此类推。

filter、mergeMap 和 forkJoin 是可管道操作符的示例。

2. 创建型 Operator

创建操作符是创建新 Observable 的独立函数，最典型的例子为 of。

import { of } from 'rxjs';
const observable = of(1, 2, 3);

变量 observable 是 Observable 类型的实例，按顺序发出 1、2 和 3。

create, of 和 from 是创建型操作符的典型示例。

3. 冷热 Observable 的区别

Cold Observable 在观察者订阅前不会开始发出值。

相反，Hot Observable 可随时开始发出值，订阅者也可随时开始观察。但订阅者可能错过订阅前发出的任何值。

看个例子：

import { Observable } from 'rxjs';
const observable = Observable.create((observer: any) => {
  observer.next('Hello World!');
});
observable.subscribe((message) => console.log(message)); // Hello World!

该 Observable 发射的值即为 Hello World，它会调用订阅者的 next 方法进行发射。

Observable.create 的输入参数为订阅者 subscriber，这是一个函数，其输入参数为类型为 any 的 Observer。函数体执行该输入参数的 next 方法。

Observable 构造函数简单，将传入的 create 函数设置到 Observable 内部属性 _subscribe 中。

随后针对 Observable.create 返回的 Observable 实例，调用 subscribe 方法进行订阅。

订阅者的逻辑通过 subscribe 方法传入，为一个函数。

toSubscriber 方法用于创建订阅者 subscriber 实例。

在 subscriber 构造函数中，仅为 destination 字段赋值。

此处将 subscribe 函数传入的应用逻辑，赋给 safeSubscriber 的 _next 属性。

接着执行 _subscribe 方法。

该 _subscribe 方法即 subscribe 函数调用的第一步，将传入的应用逻辑赋给 _subscribe 属性的那个函数。

注意，subscribe 函数调用首先会触发 Observable 的 emit value。

this._next 触发 destination.next。

此处调用 SafeSubscriber 的 _next 属性指向的方法，即 subscribe 传入的函数实现。

总结而言，Observable.create 和 Observable.subscribe 这套调用，首先触发 Observable 实例调用 next 方法，发射创建操作符时指定的待发射值；接着触发应用开发人员传入 subscribe 调用的业务逻辑，消费该发射的值。

这段代码执行的先后顺序如下：

到此这篇关于JavaScript中rxjs与 Observable 两大类操作符解析的文章就介绍到这了,更多相关JS rxjs与 Observable 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！