随着现代 Web 应用程序趋向于复杂和交互性，前端框架及工具也在不断发展，以满足应用程序的需求。Angular 是其中一个受欢迎的框架，它提供了许多功能和工具，以快速构建现代 Web 应用程序。RxJS 是 Angular 的核心依赖项之一， 它提供了强大的异步编程工具和重要的响应式编程思想，同时也可以处理流数据和事件。
在本文中，我们将介绍如何在 Angular 中使用 RxJS，涉及到响应式编程的核心思想、坚实的基础知识，以及一些使用 RxJS 处理常见问题的示例代码。本文适合那些初学者和有经验的前端开发人员学习 RxJS 在 Angular 中的应用。
响应式编程
在学习 RxJS 之前，我们需要了解响应式编程的核心思想。响应式编程是一种基于数据流和变化的编程模型，它具有以下特点：
数据流：事件和异步数据处理(DOM 事件、用户输入、API 调用、WebSockets 等) 被表述为发射器的流。通过使用这些流，我们可以轻松地处理事件和数据。
变化：数据流上的方法返回另一个数据流。这样，我们可以以一种优雅，声明式的方式组合数据流和事件处理。
声明式：响应式编程旨在让我们关注结果，而不是实现细节。当我们关注的是结果时，许多常见问题都能够得到响应式处理 (例如异步数据加载或实时更新)。
在 Angular 中，RxJS 是构建响应式应用程序的最强大工具之一。
RxJS 基础知识
RxJS 是一个实现响应式编程的库，它被编写在 JavaScript 中，并提供了丰富的工具和函数。该库使用了 observable 对象和数据流，它的概念类似于 Promise，但更加强大。
RxJS 提供了三种类型的对象：Observable，Operators，Subject
在使用 RxJS 时，一些重要的函数和概念需要被了解。
Observable
Observable 可以被看作是一个序列，它会按照时间发出零个或多个值。我们可以通过以下方式创建 Observable：
-- -------------------- ---- -------
------ - ---------- - ---- -------
----- ---------- - --- --------------------- -- -
--- -
-----------------
-----------------
--------------------
- ----- ----- -
--------------------
-
---这个例子创建了一个简单的 Observable，它只是简单地发出数字 1 和 2，然后在结束时通知线程。我们可以通过调用 .subscribe() 方法来启动观察它：
observable.subscribe({
next(x) { console.log(x); },
error(err) { console.error('something wrong occurred: ' + err); },
complete() { console.log('done'); }
});当我们订阅一个 Observable 时，我们提供了一个对象，该对象拥有观察者回调函数的定义。在上面的例子中，我们将 next() 用于处理从观察到的数据流中传递的值。
Operators
操作符是用于响应式编程的重要功能。它们是在 RxJS 中使用的一些函数，用于转换、过滤和聚合 Observable。由操作符返回的结果是另一个 Observable，它代表了一种响应式“管道”。
-- -------------------- ---- -------
------ - ---- - ---- -------
------ - ------- --- - ---- -----------------
-------- -- -- -- ---
------
-------- -- - - ---
----- -- - - ---
-
------------ -- ---------------- -- -- - - --在这个例子中，我们使用操作符 filter() 和 map() 来操作一个 Observable，filter() 函数用于过滤数组，只保留大于 2 的元素，map() 用于将符合筛选条件的数字乘以 2。
Subject
Subject 是一种特殊类型的 Observable，它可以在订阅时同时发出数据；它还拥有 next() 和 error() 方法，可以用来手动触发 Observer。在许多 RxJS 应用程序中，Subject 用于发布/订阅机制。
-- -------------------- ---- ------- ------ - ------- - ---- ------- ----- ------- - --- ------------------ ------------------- ------- - --------------- -- ---------- - ------------------------ ----- --------- - - ----- -- ---------- - -------------------- - --- ---------------- -- -- - ---------------- -- -- -
Subject 可以被认为是一种事件流，它将数据传递给订阅者。我们可以创建订阅后立即发出数据（如上例）；也可以在任意时间用 next(), error(), 或者 complete() 方法发送更多数据。
RxJS 的常见应用
下面我们将展示一些 RxJS 用于解决的共同问题的示例。
异步验证
在 Angular 中，RxJS 常用于处理表单验证。我们可以使用 observable 和操作符来简化异步验证过程。
-- -------------------- ---- -------
------ - ----------- - ---- -----------------
------ - ----- - ---- -------
------ - ---- --------- - ---- -----------------
------ ----- ---------------- -
------ ------------------- ------------ -
------ -----------------
------------ -- --------------------------------------
--------------- -- ------------ - ---- - - ----------- ---- ---
--
-
-
-------- --------------------------- ------- -
------ --------------------------------
---------- -- ------ --- -----
--
-
-------- -------------------------- ------- -
------ ----------------------- -- ----- --- ----- - ---- - --------------
-在上面的代码中，我们提供了一个异步验证器 uniqueName，当输入的名称在 1 秒后可用时验证通过。我们使用 switchMap 操作符将异步检查的结果映射到 Observable 中，并使用 map 操作符将异步检查的结果转换为上下文需要的表单验证期望。
跨组件通信
RxJS 可以用于解决跨组件通信的问题。在 Angular 中，我们使用 RxJS Subject 作为服务，用于在组件之间共享数据。
例如，假设我们有一组件需要显示一些消息，而其他组件需要触发一些消息。我们创建一个数据服务，并将一个 Subject 对象注入到服务中。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------- - ---- -------
------------- ----------- ------ --
------ ----- -------------- -
------- ------- - --- ---------------
-------------------- ------- -
------------------- ----- ------- ---
-
-------------- -
--------------------
-
------------ -
------ ----------------------------
-
-然后我们可以在需要触发消息的组件中向数据服务发送消息：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------ --------- -------------------- --------- ----- --
------ ----- --------------------- -
----------- -------
------------------- --------------- --------------- --
------------- -
-------------------------------------------------
--------------- - ---
-
-最后，我们通过在需要显示消息的组件中订阅来确定何时显示消息。例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------ --------- --------------------- --------- ----- --
------ ----- ---------------------- -
-------- ----
------------------- --------------- --------------- --
---------- -
-------------------------------------------------- -- -
------------ - --------
---
-
-以上代码使用 RxJS 来实现两个组件的数据共享。使用 Subject，我们在组件之间建立了一种流的通信方法，更方便了数据流转、数据处理。
总结
RxJS 是 Angular 中强大的响应式编程库，它可以处理流和事件，进行操作和变换，处理异步验证，数据共享等。在本文中，我们介绍了许多核心概念和操作符，希望能满足那些刚刚开始学习 RxJS 的开发人员以及那些希望提高自己的经验的开发人员。如果你是 Angular 的忠实使用者，那么 RxJS 经常是你的必需工具之一，因为它可以处理许多常见和复杂的问题，使你的应用程序更加健壮和稳定。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64803a0348841e9894fb77e4