RxJS 是一个强大的异步编程库，它可以为 Angular 应用程序提供很多方便的功能。 在这篇文章中，我们将学习如何在 Angular 应用程序中使用 RxJS，并演示一些实用的案例。
什么是 RxJS？
RxJS (Reactive Extensions for JavaScript) 是一个编写异步和基于事件的程序的库。 RxJS 在 Angular 中非常流行，因为它可以帮助你将异步操作合并到你的程序逻辑中，并允许你处理异步操作的结果。
使用 RxJS ，您可以方便地创建更优雅的代码，充分利用 JavaScript 的函数式编程和响应式编程范式。 RxJS 对于在 Angular 中使用 Observable 和 JSON API 的开发者尤其有价值。
RxJS 的核心概念
在进入 RxJS 的具体应用之前，我们需要先了解它的核心概念。
Observable
Observable 是一个可以用来表示异步数据流的类。它可以代表事件、用户接口、定时器等其他任何异步数据源。
Observable 比 Angular 中的 Promise 更加强大，因为它可以表示多个值或事件，并且可以处理错误。
Operators
RxJS 中的操作符是一组函数，它们接受 Observable 作为输入并生成新的 Observable。
RxJS 操作符允许您以非常灵活的方式转换 Observable，实现您需要的业务逻辑。
Subscription
Subscription 是连接 Observable 和 Observer 的桥梁。
当 Observable 开始生成值时，Observer 中的回调函数将被调用，并可以在任何时候取消订阅。
Subject
Subject 可以被看作是 Observable 和 Observer 的混合体。它可以是数据源，同时也可以是数据的订阅方。
Subject 允许您像发布者-订阅者模式一样发布和订阅事件，可以向多个 Observer 发出数据并在多个 Observer 之间共享数据。
在 Angular 中使用 RxJS
考虑一个简单的任务：获取从服务器返回的用户列表，然后将其显示在前端。 如果我们不使用 RxJS ，我们可以使用 Promise 和 HttpClient 来获取用户列表数据：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- ---------- ------ -
------ ----
------------------- ----- ----------- - -
---------- -
------------------------------------------ -- -
---------- - -----
---
-
-此代码将根据 /api/users 端点从服务器获取用户列表数据，将其放入 users 属性中，并将数据显示在模板中。
但是，如果您想要将其他操作与此数据合并（例如过滤或映射），则使用 RxJS 是一种更好的选择。
让我们看一下如何使用 RxJS 来获取用户列表数据：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
------ - --- - ---- -----------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- ---------- ------ -
------- ----------------
------------------- ----- ----------- - -
---------- -
----------- - ---------------------------------
---------- -- -
-- ----------
------ -----
--
--
-
-这里我们使用 Observable 和 pipe 函数来获取用户列表数据，并对其进行转换等操作。在 Angular 模板中，我们将使用 "async" 管道将该 Observable 转换为列表并显示在前端上。
例如，在模板中，我们可以编写如下代码：
<ul>
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
</ul>这里我们使用 "async" 管道将 users$ 转换为列表，并使用 *ngFor 指令将列表项呈现为 in-memory 表格。
实战应用
让我们看几个实际示例，以更深入地了解如何在 Angular 中使用 RxJS。
实例 1：在 Angular 中处理多个 Observables
有时，我们需要处理多个 Observables，例如在顶部导航菜单中显示用户信息和通知数量。 我们可以使用 combineLatest 操作符在新 Observable 中合并两个 Observables：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ----------- ------------- - ---- -------
------ - --- - ---- -----------------
------------
--------- -----------------
------------ ------------------------------
---------- ------------------------------
--
------ ----- ------------------- ---------- ------ -
------ ----------------
------------------- -------------------
------------------- ----- ----------- - -
---------- -
---------- - ---------------------------
----------------------- - -----------------------------------------
---------- ------ -- ------------
--
-
------------------------- ---------------- -------- -
------ -------------------------- --------------------------
-
-在这里，我们使用 combineLatest 操作符创建一个 Observable 组合，将两个 Observables 中的数据组合在一起。现在，我们可以像这样在模板中引用组合 Observable：
<ul>
<li>Welcome {{ (getUserAndNotification() | async)[0].name }}</li>
<li>You have {{ (getUserAndNotification() | async)[1] }} notifications</li>
</ul>此时你就可以在前端上看到用户信息和通知数量。
实例 2：使用 RxJS 在 Angular 中实现搜索工作流程
RxJS 可以帮助我们创建交互式前端应用程序，例如搜索操作。接下来，我们将扩展前一个例子，并添加一个搜索框，用于在用户列表上执行简单的搜索操作。
在 navigation.component.ts 中添加搜索功能：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ----------- ------------- - ---- -------
------ - ---- ---------- ------------- --------- - ---- -----------------
------------
--------- -----------------
------------ ------------------------------
---------- ------------------------------
--
------ ----- ------------------- ---------- ------ -
------ ----------------
------------------- -------------------
------------- -------------------
------------------- ----- ----------- - -
---------- -
---------- - ---------------------------
----------------------- - -----------------------------------------
---------- ------ -- ------------
--
----------------- - ---------------------------------
-
---------------------------- ------------------ -
------ --- --------------------- -- -
----- --------- - ------------------------------------- -- -----------------
-------------------- --------------
----------- ------ -- ------------- -- -------------------------
-------------
------------------- -- -
---------------------
---
---
-
----------------------------- -------- ---------------- -------- -
------ -------------------------- -------------------------------
----------- ------------------- -- -
------ ------ ------------------ -------
--
--
-
------------- -------- ----------------- -
------ ---------------------------------
---------- ------ -- ------------------ -- ------------------------ --- ----
--
-
-使用上述代码，我们还添加了一个名为 initSearchQueryObservable 的函数，它可以将文本框观察为可观察文本，并生成 EventEmitter。
之后，我们将使用 combineLatest 和 switchMap 操作符将搜索操作合并在一起。 在模板中，我们将使用以下内容引用 getUserAndNotification 至前端上：
<ul>
<li>Welcome {{ (getUserAndNotification(searchQuery$ | async) | async )[0].name }}</li>
<li>You have {{ (getUserAndNotification(searchQuery$ | async) | async )[1] }} notifications</li>
</ul>现在，我们可以在前端上按名称检索用户列表，因为它将在 search 函数中使用过滤器进行数据过滤。
结论
RxJS 是 Angular 开发工作流程中非常强大的工具，因为它可以将异步编程转换为易于管理的响应式编程。在 Angular 应用程序中，您可以使用它来处理多个 Observables、搜索操作等等。
我们希望本文的示例和代码可以帮助你在 Angular 中更好地使用 RxJS 编写更优雅、更健壮的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f189cb6fbf9601973cc009