RxJS 是一个用于基于事件的编程的库。它可以帮助在 JavaScript 应用程序中更优雅地处理事件流。而其中最常用的特性之一便是操作符链和管道。
本文将会详细介绍 RxJS 中的操作符链和管道的使用，同时也提供一些示例代码和指导意义。
操作符链
RxJS 中的操作符链是一种将多个操作符顺序连接处理事件序列的方式。通过将操作符连接起来，可以构建可读性和可维护性更强的代码，并且可以通过整个链式结构来传输数据。
操作符链的基本语法
在 RxJS 中，操作符链使用 pipe 方法来实现。该方法接受多个操作符作为参数，并返回一个新的 Observable 对象。下面是一个基本的操作符链示例：
-- -------------------- ---- ------- ------ - ---- - ---- ------- ------ - ---- ------ - ---- ----------------- ----- ------- - -------- -- -- -- ---- ------------- -------- -- - - - --- --- ----- -- - - -- --------------- -- ------------------ -- ------- -- --
在上述代码中，首先我们创建了一个 Observable 对象 numbers，它会发出一个由数组 [1, 2, 3, 4, 5] 组成的序列。然后使用 pipe 方法将两个操作符 filter 和 map 连接起来。在 filter 操作符中，我们过滤出了所有偶数的元素，map 操作符则将这些偶数的元素平方。最后使用 subscribe 方法，订阅这个 Observable 对象，输出结果为 4 和 16。
常用的操作符
在 RxJS 中，有多种常用的操作符可用于操作符链。下面是一些常见的操作符，以及它们的作用。
map 操作符
map 操作符用于将 Observable 中的每个元素都映射到一个新的值。下面是一个使用 map 操作符的示例：
import { from } from 'rxjs';
import { map } from 'rxjs/operators';
const colors = from(['red', 'green', 'blue']);
colors.pipe(
map(color => color.toUpperCase())
).subscribe(color => console.log(color)); // output: RED, GREEN, BLUE在上述代码中，我们将每个颜色名称都转换为大写字母。
filter 操作符
filter 操作符用于过滤 Observable 序列，只返回符合条件的元素。下面是一个使用 filter 操作符的示例：
import { from } from 'rxjs';
import { filter } from 'rxjs/operators';
const numbers = from([1, 2, 3, 4, 5]);
numbers.pipe(
filter(n => n % 2 === 0)
).subscribe(num => console.log(num)); // output: 2, 4在上述代码中，我们过滤出了所有偶数的元素。
tap 操作符
tap 操作符用于在序列中每个元素处理之前执行副作用。它提供了一个透明的方法来检查 Observable 序列。下面是一个使用 tap 操作符的示例：
-- -------------------- ---- ------- ------ - ---- - ---- ------- ------ - --- - ---- ----------------- ----- ------- - -------- -- -- -- ---- ------------- ------- -- ---------------- ------- ------ --- ---------- -------- -- - - - --- -- --------------- -- ------------------ -- ------- --- ------- ------ --- -- --- ------- ------ --- -- -- --- ------- ------ --- -- --- ------- ------ --- -- -- --- ------- ------ --- -
在上述代码中，我们使用 tap 操作符输出了每个数字的值，以便调试和查看。由于 tap 操作符只是执行副作用，因此它没有改变 Observable 的值。
mergeMap 操作符
mergeMap 操作符将 Observable 中的每个元素映射到另一个 Observable，然后将这些 Observable 合并到单个 Observable 中。下面是一个使用 mergeMap 操作符的示例：
-- -------------------- ---- -------
------ - --------- - ---- -------
------ - ---- -------- - ---- -----------------
----- ------ - ------------------- ---------
------------
---------
----- -- -------------------------------------------
--
------- -- -----------
---------------- -- -------------------在上述代码中，我们在每次单击事件发生时，使用 fetch 请求从 URL 返回数据，并将该 Observable 转换为 JSON。然后将这个 Observable 合并到单个 Observable 中，并且用 subscribe 输出最终的数据。
惰性运算符
在 RxJS 中的操作符被分类为惰性运算符和及时运算符。惰性运算符是在订阅的时候执行的，而及时运算符是在 Observable 执行时立即执行的。
常用的惰性运算符包括 filter、map、take、skip 和 mergeMap；常用的及时运算符包括 tap、do、toArray 和 reduce。
管道
管道是 RxJS 中的一个特性，允许使用一次订阅操作对 Observable 序列进行更复杂的操作。管道由一系列操作符组成，这些操作符依次处理 Observable 序列中的每个元素，最终生成一个新的 Observable 序列。
一个使用管道的简单示例：
-- -------------------- ---- ------- ------ - ---- - ---- ------- ------ - ---- ------ - ---- ----------------- ----- ------- - -------- -- -- -- ---- ------------- -------- -- - - - --- --- ----- -- - - -- --------------- -- ------------------ -- ------- -- --
在上述代码中，我们使用 pipe 方法将 filter 和 map 操作符连接起来，以便复杂处理 numbers 序列。在管道中，numbers 序列的每个元素首先被过滤，只剩下偶数，然后平方，并且发出。
管道操作符的顺序
在管道中，操作符的顺序非常重要。因为每个操作符都是作用于前一个操作符的输出，因此顺序对于产生正确的输出至关重要。
例如，以下管道使用 filter 和 map 操作符的顺序错误：
-- -------------------- ---- ------- ------ - ---- - ---- ------- ------ - ---- ------ - ---- ----------------- ----- ------- - -------- -- -- -- ---- ------------- ----- -- - - --- -------- -- - - - --- -- --------------- -- ------------------ -- ------- -- --
在上述代码中，由于 map 操作符放在了 filter 操作符的前面，因此会导致输出为 1、4、9、16、25，这并不是我们想要的结果。
多次使用管道
在 RxJS 中，在同一个 Observable 上可以使用多个管道。下面是一个示例：
-- -------------------- ---- ------- ------ - ---- - ---- ------- ------ - ---- ------ - ---- ----------------- ----- ------- - -------- -- -- -- ---- ----- ----------- - ------------- -------- -- - - - --- --- ----- -- - - -- -- ----- ---------- - ------------- -------- -- - - - --- --- ----- -- - - -- -- ------------------------- -- ----------------- ------- ---------- ------------------------ -- ---------------- ------- ----------
在上述代码中，我们分别使用两个管道 evenSquares 和 oddSquares 来处理 numbers 序列。在 evenSquares 中，我们只输出偶数值的平方，而在 oddSquares 中，我们只输出奇数值的平方。这种方法使我们的代码有更好的组织性和可读性。
思考
在使用操作符链和管道时，可能会遇到一些问题。一些常见的问题是，操作符无效或输出不正确。这时应该检查操作符的顺序是否正确，并且检查每个操作符的输出是否正确。
我们还应该考虑使用 throw 操作符或 catchError 操作符来捕获和处理可能的异常情况。
结论
在 RxJS 中，操作符链和管道是非常有用的功能。操作符链可以帮助我们在一个 Observable 序列中添加多个操作符，以构建可读性更好的代码。管道允许我们使用单个 subscribe 操作符对一个 Observable 序列进行多次处理。
了解这些常见的操作符和管道，以及它们的应用场景，有助于我们更好地使用 RxJS 在 JavaScript 应用程序中进行事件处理。同时，我们应该努力避免一些常见的错误，以充分利用这些强大的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67089501d91dce0dc8729d59