前言
在现代前端开发中，异步操作经常被用到。随着 Angular 技术的普及，RxJS成为了 Angular 的一部分。RxJS 简而言之就是 Reactive Extensions for JavaScript，它是一种用于处理异步数据流的 JavaScript 库。本文将讲述如何在 Angular 中使用 RxJS 实现异步操作的最佳实践。
RxJS 简介
RxJS 是一个使用 Observables 、 operators 和 subject 等操作符处理应用程序中的异步操作的库。 RxJS 通过内置的操作符，可将复杂的异步和同步代码转化为更加简化和可读性更高的代码。
举个栗子，下面代码用 RxJS 实现了一个简单的计数器
import { interval } from 'rxjs';
const source = interval(1000);
const subscription = source.subscribe(value => console.log(value));上面代码中，源代码 interval(1000) 生成一段间隔 1 秒的无限数字序列。每次产生新值的时候，就会 console.log 打印出这个新值。我们使用 subscription 来表示此次订阅，通过它可以停止订阅。
RxJS Observable 的使用
RxJS 主要是基于 Observable ，所以我们需要先学习 Observable 的使用。
Observable 是一个能够发出零个或多个值的集合。它们就像事件一样：发生了，任何人都可以订阅并使用这些事件。在 RxJS 中，Observable 是一种用于传达异步消息的数据类型。 在 Angular 中，我们可以通过 HttpClient 和 Router 等服务和一些 Angular 库和 RxJS 进行通信。
在 RxJS 中创建 Observable 最简单的方法是使用 of() 操作符，它允许我们传递任意数量的值，并在之后，将这些值发出下去。
import { of } from 'rxjs';
const source = of('a', 'b', 'c');
const subscription = source.subscribe(value => console.log(value));
//output: a, b, cRxJS Subscription 的使用
在 RxJS 中，通过订阅 Observable 来开始处理异步事件。我们可以通过 Subscription 对象来控制 Observable。 Subscription 组件有一个 unsubscribe() 方法，调用它可以停止前一个订阅。若订阅了多次，可以使用 subscription 中的 unsubscribe() 程序，以停止订阅所有。
RxJS 会在第一次订阅时自动启动 Observable，因此只需在最后一次使用它，它就会认为 Observable 不再使用并立即关闭它。
import { interval } from 'rxjs';
const source = interval(1000);
const subscription = source.subscribe(value => console.log(value));
setTimeout(() => {
subscription.unsubscribe();
}, 10000); // 停止订阅RxJS 操作符的使用
RxJS 拥有很多操作符，用于转换或修改 Observables 数组或流。下面是一些常见的操作符：
map 操作符
map 操作符是一个经常使用的操作符，它可以将发射的每个值映射到新值。 这个操作符很常用，因为经常需要使用映射操作将发射的值转换为更有用的值。
-- -------------------- ---- ------- ------ - ----- -- - ---- ------- ------ - --- - ---- ----------------- -- ------ ---------- ----- ------ - -------- -- -- -- ---- ----- ------ - --------------------- -- ----- - ----- ---------------------- -- -------------------- -- ------- --- --- --- --- --
filter 操作符
filter 操作符可以将 Observable 仅解析符合指定逻辑的值。在下面的例子中，我们创建了一个包含许多数字的 Observable，并使用 filter 操作符仅查找偶数数字。
-- -------------------- ---- ------- ------ - ----- -- - ---- ------- ------ - ------ - ---- ----------------- ----- ------ - -------- -- -- -- ---- ----- -------- - ------------------------ -- ----- - - --- ---- ------------------------ -- -------------------- --------- -- -
tap 操作符
tap 操作符用于在 pipe 链中进行调试。它可以助于分析 Observable 服从何种逻辑，并追踪数据的流向。这样，在查找错误或调试测试的错误时，会很有帮助。
-- -------------------- ---- ------- ------ - ---- - ---- ------- ------ - ------- ---- --- - ---- ----------------- ----- ------ - -------- -- -- -- ---- ----- ------- - ------------ ------- -- -------------------- ---------- ------- -- --- - ---- ---------- -- --- - ---- ------- -- ------------------- --------- -- ----------------------- -- -------------------- -- --- ------- - ------- - ------- - ------- - ------- - ------ -- ------ -- --
在 Angular 中使用 RxJS
在 Angular 项目中，使用 RxJS 必须首先安装 RxJS。 运用 CDN 或 yarn 等安装，以引入 RxJS：
npm install rxjs # or yarn add rxjs
在你的组件中通过 import 引入 Observable 。在组件中，我们可以通过 HttpClient 获取数据，这些数据将使用 Observable 对象返回。通常情况下，我们会订阅这个 Observable 来处理响应数据。例如：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------ - --------- - ---- ----------------
------ - ---------- - ---- -------
------------
--------- -----------
--------- ------- ------ - ----- ---------
--
------ ----- ------------ -
-------- ------- -------------------
------------------- -------- ----- ----------- -
----------- - -------------------------------------------------------------------------------- -- ---------------
-
-上面的最后一行代码会抓取 https://jsonplaceholder.typicode.com/todos/1 页面的标题。在这一行代码中，我们使用 get() 方法获取到一个 Observable 对象。在该 Observable 对象中，我们将 JSON 格式的响应映射成字符串。
在 Angular 中，HTTP 调用使用 RxJS 使其异步，从而确保优质的性能，并避免阻止 DOM 渲染。
进一步的示例代码
下面是一个更有深度的 rxjs 示例代码，同时说明了如何使用各种操作符的一些最佳实践。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --------- ----------- ------------ - ---- -------
------ - ------- ---- ------- --------- - ---- -----------------
------------
--------- -----------
--------- -
------ ------ - ----- -------
--------------
--
--
------ ----- ------------ ---------- ------ -
------- -------------------
--- - ---
----------- ---- -
-- ------------------- ----------
----- ------- - ------------------------ -- - - --- ----------- -- - - -----
-- ---------------
----- --------- - --------------------- -- - -- ----
-- -----------
----- ------------ - ------------------------- -- -- - - ----
-- ----- ----------------------------------
----- ------------- - ---
----- ------------- ------------ - ------------------------
----- ----- -- -
-------- - --------------- -- -------- -- -- -- ----------
-------------------
-- ------ -- -------------- -
----------------- -------- ------ -------------------
-
--
------ ----- -- ---------------------
--------- -- -- --------------------
---
------------- -- -
---------------------------
-- ------
-
-总结
RxJS 提供了一种优雅的方案处理异步操作，适用于任何涉及到异步操作的应用场景。在 Angular 中，使用 RxJS 几乎已经是标配，并且随着 Angular 版本的更新，特别是 NgRx 在状态管理中的广泛应用，RxJS 的重要性愈加凸显。上面的实践展示了一些常见的操作和最佳实践。希望本文能够帮助你在 Angular 中使用 RxJS 更加得心应手！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1cf47f6b2d6eab3d09690