什么是 RxJS 和 Observables？
RxJS 是一个 JavaScript 库，它被用来处理异步数据流。它的核心概念是 Observables，它是一个异步的、可取消的、数据流。Observables 可以被看作是如同事件流一样的东西，它可被用来处理从网络请求或用户事件等来源产生的数据流。RxJS 也提供了一些组合操作，使得它能够轻松地处理和转换数据流。
Observables 必须包含以下四个部分：
- 订阅（subscribe）: 用于监听数据流的变化。
- 事件（next）：当数据流中有数据时触发的事件。
- 错误（error）：当数据流中出错时触发的事件。
- 完成（complete）：当流的工作完成时触发的事件。
在 RxJS 中，所有的异步行为都被封装到 Observables 中。这使得编写异步代码变得更加简单和直观。
如何使用 Observables？
首先，我们需要安装 RxJS。你可以通过 npm 来安装，只需在命令行中输入以下命令即可：
npm install rxjs
安装成功之后，我们就可以开始使用 RxJS 和 Observables 了。下面是一个简单的示例：
-- -------------------- ---- -------
------ - ---------- - ---- -------
----- ---------- - --- --------------------- -- -
-------------------
-------------------
-------------------
------------- -- -
-------------------
----------------------
-- ------
---
----------------------
----- - -- ------------------ -- ---
------ --- -- --------------------- -- -----
--------- -- -- -------------------------
---在这个例子中，我们创建了一个 Observable，它会依次发出一到三这三个数字。接着，我们使用 setTimeout 模拟了一个异步行为，并在一秒后发出数字 4，并使用 complete 表示流的工作已经完成。
我们使用 subscribe 方法来订阅 Observable，并在数据流中有数据时输出到控制台。在这个例子中，subscribe 方法接受一个对象作为参数，该对象用来配置处理数据流的回调函数。
RxJS 的常用操作符
在 RxJS 中，有许多常用的操作符，它们可以用来处理和转换数据流。以下是一些常用的操作符：
map
map 操作符可以用来将 Observable 中的值映射成另一个值。例如，我们可以使用 map 操作符将 Observable 中的数字乘以 2：
import { from } from 'rxjs';
import { map } from 'rxjs/operators';
from([1, 2, 3, 4, 5])
.pipe(
map(x => x * 2),
)
.subscribe(x => console.log(x));这个例子中，我们通过 from 操作符创建了一个 Observable，并使用 pipe 方法来对该 Observable 应用 map 操作符。map 接受一个函数作为参数，该函数将当前值映射成一个新值。在这个例子中，我们将每个数字乘以 2。
filter
filter 操作符可以根据一个条件来过滤 Observable 中的值。例如，我们可以过滤出所有奇数：
import { from } from 'rxjs';
import { filter } from 'rxjs/operators';
from([1, 2, 3, 4, 5])
.pipe(
filter(x => x % 2 === 1),
)
.subscribe(x => console.log(x));在这个例子中，我们创建了一个 Observable，并使用 pipe 方法来对它应用 filter 操作符。filter 接受一个函数作为参数，返回一个布尔值来表示当前值是否应该被过滤。在这个例子中，我们过滤掉了所有偶数。
mergeMap
mergeMap 操作符可以让我们在 Observable 中嵌套其他的 Observables。例如，我们可以对一个 Observable 的每个值都发起一个 HTTP 请求，并将请求结果作为另一个 Observable 中的值：
-- -------------------- ---- -------
------ - -- - ---- -------
------ - -------- - ---- -----------------
------ - ---- - ---- ------------
------------------------------------
------
------------ -- -------------------
-
--------------- -- -------------------在这个例子中，我们首先创建了一个 Observable，它的值是一个 API 的 URL。接着，我们使用 mergeMap 操作符来映射 URL 到一个新的 Observable，该 Observable 使用 ajax 来取回数据并返回一个 JavaScript 对象。我们最终订阅新的 Observable 并输出数据。
总结
RxJS 和 Observables 为处理异步数据流提供了一种新的方式。使用 RxJS，我们可以更加直观地处理异步结果，并使用许多操作来转换和处理数据流。如果你还没有使用过 RxJS，那么现在就是时候开始深入了解了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647e846548841e9894e376c0