什么是 RxJS？
RxJS 是一个用于处理异步编程的库。它引入了 Observables，被视为一个集成了观察者模式的异步编程概念。
Observables
Observables 是 RxJS 的核心概念。它们负责将数据流转换为 stream，在 Angular 中也被称作流，由多个事件构成。与 Promise 不同，Observables 不是一次性的，而是可以订阅和取消订阅的。这一特性使得 Observables 成为处理异步编程方面的有力工具。
核心概念
RxJS 中包含几个核心概念：
Operators
ResultDecomposer 是 Observables 的核心操作符之一。它主要用于将链式方法传递到 Observables 中处理流。
一些常见的 Operators 包括：
- map：将流中的每个事件映射为新的事件。
- filter：筛选流中符合条件的事件。
- tap：在流中添加副作用而不改变任何事件。
- switchMap：将外部流转为内部流。
- debounce：过滤流中太频繁的事件。
Subjects
Subject 是 Observables 的其中一个 sub-class。他们不仅可以订阅事件，还可以发出自己的事件。
Observers
Observer 对流中发生的事件做出回应。一个 Observer 通常会绑定到一个 Subject 或者 Observable 实例上，以便在订阅和取消订阅时对事件做出回应。
编写 Observables
Observables 构造函数的核心方法是 create。通过这个构造函数，你可以实现自己的 Observables。
这是一个简单的示例：
------ - ---------- - ---- ------- ----- ---------- - --- --------------------- -- - ----------------------- ----------------------- -------------------- ---
这个示例中，我们创建了一个流并发出两个事件，最后完成。
示例：使用 RxJS 重构一个 HTTP 请求
在本示例中，我们将以前的HTTP服务并使用 RxJS 重构。我们将使用 HttpClient 并将其转换为 Observable。
首先，我们需要导入 HttpClient 和 Observables：
------ - ---------- - ---- ----------------------- ------ - ---------- - ---- -------
然后，我们将原先的服务方法转换为一个绑定到 Observable 的函数：
---------- --------------- - ------ ----------------------------------------------------------- -
而对于调用了这个方法的组件：
------ ----- ------------ ---------- ------ -
------ ----
------------------- ----- ----------- --
---------- -
---------------------------------------------------------------------------- -- -
---------- - -----
---
-
-可以重构为：
------ ----- ------------ ---------- ------ -
------- ----------------
------------------- ----- ----------- --
---------- -
----------- - ------------------------------------------------------------
-
-最后，我们将 HTML 模板中通过改变我们的样式：
--- ------------- - ----- -- -------
--- ----------- ---- -- -------
-- ---------- --
-----
-----通过这次重构，我们不仅使代码可读性提高，而且提升了代码的性能和可维护性。
结论
RxJS 是 Angular 中非常重要的概念。它提供了一种更加简洁的方法来处理异步编程，使代码更加可读性高、性能高、相互独立。了解 RxJS 可以使用户在 Angular 中更加熟练地进行流式数据处理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/67037877d91dce0dc84b913a