rxjs Observable 自定义 Operator 的开发技巧
作者:互联网
操作符是 RxJS 库和 Observables 的基础块。 它使我们能够通过使用一些关键字(函数)来执行复杂的操作。 运算符只不过是获取源 Observable、对其执行操作并返回新 Observable 的函数。
rxJS 的 管道运算符 pipe 允许我们链接运算符。每个运算符都接受一个 Observable 并返回一个 Observable,这种一致的行为使得链接成为了可能。 Operator 返回的 Observable 作为下一个运算符的输入。
下面是一个最简单的自定义 Operator 的例子。
import { interval, of } from 'rxjs';
function fancyOperator(source) {
return source;
}
interval(1000)
.pipe(fancyOperator)
.subscribe((value) => console.log(value));
pipe 调用并不会真正执行 Operator 函数体的逻辑,直至 Observable 被 subscribe 为止??是这样吗?
pipeFromArray 仅仅取出 Operation 数组里存储的第一个函数。
然后调用之,输入参数 this 就是源 Observable.
下面我们对 fancyOperator 添加少许功能。
import { interval, Observable } from 'rxjs';
function fancyOperator(source) {
return Observable.create((observer) => {
observer.next('Jerry');
observer.complete();
});
}
interval(1000)
.pipe(fancyOperator)
.subscribe((value) => console.log(value));
这里我们采取了移花接木的方法,在自定义 Operator 里返回了一个新的 Observable,这个 Observable 只发射一次数据,就进入终止状态。
看一个现实项目中自定义 Observable 的例子:
import { fromEvent, interval, Observable } from 'rxjs';
import { filter } from 'rxjs/operators';
function filterKey(key) {
return filter((event: KeyboardEvent) => event.key === key);
}
fromEvent(document, 'keyup')
.pipe(filterKey('Enter'))
.subscribe(
(data) => console.log(data) // KeyboardEvent
);
这个自定义 Operator 的输入是 Enter,输出是 filter 调用的返回值,一个新的函数。filter 调用接收一个 predicate,返回一个新的函数。
看一下 filter 返回函数运行时打印的值:
把原始的 Observable,传送给 filter 返回的函数并执行:
filter 返回的函数对原始 Observable 进行加工,返回一个新的 Observable:
触发 filterOperator 的构造函数:
把新建的 filterOperator 实例传入原始 Observable 的 lift 方法。这个 lift 操作非常简单,新建一个 Observable,把原始的 Observable挂接到新的 Observable 的 source 字段,同时把 Operator 实例赋给新的 Observable 实例的 operator 方法。
因此最后订阅时,订阅的是 lift 操作之后的新的 Observable 实例。
subscribe 会触发 filterOperator 的 call 方法:
标签:Observable,函数,自定义,运算符,rxjs,Operator,filter 来源: https://www.cnblogs.com/sap-jerry/p/16304206.html