你会用RxJS吗？【细说 RxJS中的 Operators】

Witty_Wizard
2,151 阅读4分钟

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”

前言

上一篇我们介绍了RxJS中的Observable 和 Observer, 本篇内容我们说一下Operators(操作符)。RxJS中的操作符很多，类似于Lodash提供的能力。

Operators（操作符）

Operators其实是函数，可以让我们用声明的方式非常方便的组合出比较复杂的异步代码。

Pipeable Operator 是一个将 Observable 作为其输入并返回另一个 Observable 的函数。这是一个纯粹的操作：之前的 Observable 保持不变。

Pipeable Operator 本质上是一个纯函数，它将一个 Observable 作为输入并生成另一个 Observable 作为输出。订阅输出 Observable 也会订阅输入 Observable。

Creation Operators是另一种运算符，可以作为独立函数调用以创建新的 Observable。例如：of(1, 2, 3)创建一个 observable，它将一个接一个地发出 1、2 和 3。创建运算符将在后面的部分中更详细地讨论。举个创建操作符的例子

import { of, map } from 'rxjs';

of(1, 2, 3)
  .pipe(map((x) => x * x))
  .subscribe((v) => console.log(`value: ${v}`));

// 输出:
// value: 1
// value: 4
// value: 9

Piping(管道）

管道运算符是函数，它可以像普通函数一样使用，op()(obs)- 但实际上，它们中的许多往往会组合在一起，很快就会变得不可读：op4()(op3()(op2()(op1()(obs)))). 出于这个原因，Observables 有一个名为的方法.pipe()，它可以完成同样的事情，同时更容易阅读。

obs.pipe(op1(), op2(), op3(), op4());

Creation Operators（创建操作符）

什么是创建运算符？与管道操作符不同，创建操作符是可用于创建具有一些常见预定义行为或加入其他 Observable 的 Observable 的函数。

创建运算符的典型示例是interval函数。它将一个数字（不是 Observable）作为输入参数，并产生一个 Observable 作为输出：

import { interval } from 'rxjs';

const observable = interval(1000 /* number of milliseconds */);

Higher-order Observables (高阶 Observables)

看到高阶一次，可以想到高阶函数，高阶组件。所谓的高阶 Observables，就是处理Observables的Observables。

例如：假如有一个Observable字符串的url，这些字符串想要查看文件的url，代码可能如下：

const fileObservable = urlObservable.pipe(map((url) => http.get(url)));

http.get()为每个单独的 URL 返回一个 Observable（可能是字符串或字符串数​​组）。现在你有了一个 Observable的Observable，一个高阶的 Observable。

但是你如何使用更高阶的 Observable 呢？通常，通过扁平化：通过（以某种方式）将高阶 Observable 转换为普通 Observable。例如：

const fileObservable = urlObservable.pipe(
  map((url) => http.get(url)),
  concatAll()
);

concatAll()操作符订阅从“外部” Observable 出来的每个“内部” Observable，并复制所有发出的值，直到该 Observable 完成，然后继续下一个。所有值都以这种方式连接。他们是串行执行的。

  • mergeAll()— 在每个内部 Observable 达到订阅时，然后并行发送每个值
  • switchAll()— 当第一个内部 Observable 到达时订阅时，并在它执行时触发，但是当下一个内部 Observable 到达时，取消订阅前一个，并订阅新的。

操作符的类别

创建运算符

  • ajax 为ajax请求创建一个 observable，其中包含带有 url、标头等的请求对象或 URL 的字符串。
  • bindCallback
  • bindNodeCallback
  • defer 创建一个 Observable，在订阅时调用 Observable 工厂为每个新的 Observer 创建一个 Observable。
  • empty
  • from 从 Array、类数组对象、Promise、可迭代对象或类 Observable 对象创建 Observable。
  • fromEvent 从事件类型创建一个Observable，支持 Dom, Node EventEmitter, Jquery, DOM NodeList, DOM HtmlCollection等事件
  • fromEventPattern 从任意 API 创建一个 Observable 用于注册事件处理程序
  • generate
  • interval
  • of
  • range
  • throwError
  • timer
  • iif

创建加入运算符

转换运算符

过滤运算符

链接运算符

多播运算符

错误处理运算符

条件和布尔运算符

数学和聚合运算符

运算符种类比较多，大家可以先记住一些大类，每个大类下使用几个小类，剩下的在使用的时候可以多翻翻文档。

结束语

RxJS不建议大家盲目的去用，一定要有合适的场景，盲目的去用可能会造成项目的复杂度会大幅度的提升。

如果你觉得该文章不错，不妨

1、点赞，让更多的人也能看到这篇内容

2、关注我，让我们成为长期关系

3、关注公众号「前端有话说」，里面已有多篇原创文章，和开发工具，欢迎各位的关注，第一时间阅读我的文章

avatar
文章
阅读
粉丝