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

·  阅读 1566
你会用RxJS吗?【细说 RxJS中的 Operators】

“我报名参加金石计划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(可能是字符串或字符串数​​组)。现在你有了一个 ObservableObservable,一个高阶的 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、关注公众号「前端有话说」,里面已有多篇原创文章,和开发工具,欢迎各位的关注,第一时间阅读我的文章

分类:
前端
收藏成功!
已添加到「」, 点击更改