Rxjs 是什么？它是 JavaScript 的一个库，提供了响应式编程的能力，通过创建可观察序列，可以轻松地处理异步事件或数据流。使用 Rxjs，我们可以以一种声明式的方式来编写代码，从而使我们的代码更加简洁，易于维护并且可靠。
大纲
在本文中，我们将学习 Rxjs 的核心概念、运算符和如何将其应用于实际项目中。我们将覆盖以下主题：
- Rxjs 的核心概念
- 使用 Rxjs 进行基本操作
- 使用 Rxjs 进行复杂流处理
- 将 Rxjs 应用于实际项目
- 总结
Rxjs 的核心概念
在深入了解 Rxjs 的各个方面之前，我们需要了解它的核心概念。Rxjs 提供了一些对象来封装事件和数据流，这允许我们以一种函数式的方式来处理这些对象。
Observable
Observable 在 Rxjs 中是一个表示异步数据的对象。它提供了一些方法，我们可以使用这些方法来处理这些数据。
例如，我们可以使用 Observable.of() 方法来创建一个简单的 Observable 对象：
import { Observable } from 'rxjs';
const source$ = Observable.of(1, 2, 3);
source$.subscribe(val => console.log(val));当我们运行上面的代码片段时，console 将输出 1、2、3。
Observer
Observer 是一个对象，用于定义在 Observable 发送数据时如何处理这些数据。Observer 需要实现 next()、error() 和 complete() 方法。next() 方法将接收来自 Observable 发送的数据，error() 和 complete() 方法将用于处理错误和完成事件。
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ----- ------- - ---------------- -- --- ----- -------- - - ----- --- -- ----------------- ------ --- -- ----------------- --------- -- -- ------------------- -- ----------------------------
Observer 也可以通过传递下一个函数、错误函数和完成函数参数来创建。
Subscription
Subscription 是指在 Observable 对象上执行 subscribe() 方法时返回的对象，它表示 Observable 的执行。您可以使用它来取消执行并释放资源。
import { Observable } from 'rxjs';
const source$ = Observable.of(1, 2, 3).subscribe(val => console.log(val));
source$.unsubscribe();Operators
运算符是 Rxjs 的核心。它们可以看作是 Observable 对象的方法，用于对数据进行处理。Rxjs 提供了丰富的运算符，包括过滤、变换、组合等等。
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ------ - ---- ------ - ---- ----------------- ----- ------- - ---------------- -- --- ------------- ---------- -- --- - --- ------- -- --- - --- --------------- -- ------------------
上面的代码演示了 filter 和 map 运算符如何应用于输入 Observable 对象。
使用 Rxjs 进行基本操作
在我们开始处理更复杂的数据流之前，我们需要了解如何使用 Rxjs 进行基本操作。
创建 Observable 对象
Rxjs 提供了一些函数，用于创建 Observable 对象，例如：
- of()：将一个可变参数序列转换成Observable 对象。
- from()：将一个迭代器、可枚举对象、Promise 对象、类 Promise 对象或Observable 对象转换成 Observable 对象。
使用运算符进行流处理
Rxjs 提供了一些运算符，用于对 Observable 对象进行流处理。
常用的运算符包括：
- filter()：过滤元素；
- map()：变换元素；
- reduce()：针对发出的每个值调用 accumulator 函数，其结果输出为单个值。
- scan()：类似于 reduce()，但是每个输出都包含累计结果。
订阅 Observable 对象
订阅 Observable 对象是发送数据的开始。它类似于 JavaScript 中的 Promise，但是可以发送多个值并在任何时候取消。
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ----- ------- - ---------------- -- --- ----- ------------ - ------------------ --- -- ----------------- --- -- ----------------- -- -- ------------------- -- ---------------------------
在上面的代码中，我们订阅了 Observable 对象，并传递了包含 next、error 和 complete 方法的 Observer 对象。
使用 Rxjs 进行复杂流处理
除了简单的操作之外，Rxjs 还可以处理更复杂的数据流。
操作符的组合
Rxjs 允许您将多个运算符组合在一起以进行复杂的流处理。
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ------ - ---- ------ - ---- ----------------- ----- ------- - ------------------- -- -- -- ---- ------------- ---------- -- --- - - --- --- ------- -- --- - --- --------------- -- ------------------
在上面的代码中，我们在从()方法中创建的 Observable 上应用了 filter() 和 map() 运算符。这些操作符将执行一个过滤条件，并将结果映射为一个新的值。
多个 Observable 对象的合并
我们可以使用 combineLatest() 运算符将多个 Observable 对象合并为一个 Observable 对象。
-- -------------------- ---- ------- ------ - ------------- - ---- ------- ------ - --- - ---- ----------------- ----- ----- - -------------------------- ----- ----- - -------------------------- -------------------- ------------ ----------- ------ -- ---- - ----- --------------- -- ------------------
在上面的代码中，我们在两个 Observable 对象上应用了 combineLatest() 运算符，并使用 map 运算符将两个值的和作为输出。
错误处理
如果在 Observable 链中出现错误，我们可以使用 catchError() 运算符来捕获和处理错误。
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
const source$ = throwError('An error occurred');
source$.pipe(
catchError(error => Observable.of(`Error: ${error}`))
).subscribe(val => console.log(val));在上面的代码中，我们创建了一个 Observable 对象，当它被订阅时就会抛出一个错误。我们使用 catchError() 运算符来捕获这个错误并返回一个替代值。
异步操作
Rxjs 基于事件和数据流，它非常适合处理异步操作。
在 JavaScript 中，我们通常使用 Promise 对象来处理异步操作，但是它们只能发送一次结果。相反，使用 Observable 对象，我们可以发送多个结果，并在适当的时候取消执行。Rxjs 提供了一些实用工具，例如 delay()、retry() 和 timeout() 以帮助我们处理异步操作。
-- -------------------- ---- -------
------ - -------- - ---- -------
------ - ----- --------- - ---- -----------------
----- ---- - -------------------
--------
------- -- --------------------
--------
----- -- ------- --------- ------
---
-----------
--
------------------ -- ------------------在上面的代码中，我们创建了一个具有异步嵌套性质的 Observable。我们使用 map() 运算符将源 Observable 转换为一个新的 Observable，这个新的 Observable 本身也是具有嵌套性质的。使用 concatAll() 运算符，我们将这些嵌套的 Observable 合并成一个大的 Observable 以进行订阅。
将 Rxjs 应用于实际项目
Rxjs 可以用于实际项目中的许多方面，例如：
- 处理 UI 事件和用户输入
- 处理 HTTP 请求
- 处理 WebSockets 实时数据
- 处理路由和导航
以下是一个例子，展示如何在 Angular 中使用 Rxjs 处理 HTTP 请求：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ----------- -
------------------- ----- ----------- --
----------- ------------------ -
------ --------------------------------------------------------------------
-
-在上面的代码中，我们创建了一个使用 HttpClient 对象与远程数据源通信的服务。我们使用 Observable 对象作为返回值，以便组件可以订阅该服务并在任何时候取消订阅。
总结
Rxjs 是一个非常强大的库，它可以使我们的代码更加简洁、易于维护并且可靠。除了许多构建块和运算符之外，Rxjs 还提供了对异步操作和嵌套数据流的支持。Rxjs 可以用于许多不同的应用程序场景，例如 UI 事件处理、HTTP 请求、WebSockets 以及路由和导航。如果您在未来的项目中使用 Rxjs，您会看到这款库的巨大价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645a1f88968c7c53b0c40b34