rxjs Observable 自定义 Operator 的开发技巧

Jerry Wang 发表于 2022/11/30 10:26:43 2022/11/30
【摘要】 本文介绍 Angular 项目开发中,需要自定义 Operator 的场合以及自定义操作符的详细记述实现细节。 操作符是 RxJS 库和 Observables 的基础块。 它使我们能够通过使用一些关键字(函数)来执行复杂的操作。 运算符只不过是获取源 Observable、对其执行操作并返回新 Observable 的函数。

本文介绍 Angular 项目开发中,需要自定义 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 方法:

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。