随着前端技术的不断发展，RxJS 作为响应式编程的代表之一，为我们提供了一种全新的编程方式。在 Angular 中，RxJS 已经成为了一个很重要的工具库。在本文中，我们将深入介绍 Angular 中 RxJS 的使用，学习如何使用 RxJS 构建更加优雅的代码。
RxJS 是什么？
RxJS（ReactiveX for JavaScript）是响应式编程的一种实现，并且用于处理异步编程中的统一数据流。这是一个基于可观察序列的框架，相比于传统的回调、Promise 等方式，它可以更加简单、灵活和优雅的处理异步数据操作。
简单来说，RxJS 就是允许我们使用一些简单的方法 观察 数据/事件的变化，通过处理这些事件来完成我们的异步操作。
观察者模式
也许你对设计模式中的观察者模式不陌生，RxJS 中的观察者模式与之类似。
在 RxJS 中，有两个核心的概念：
- 可观察序列（Observable）：它表示一个可观察的异步事件序列，可以被某个观察者进行订阅，当有新的事件时将推送给观察者来处理。可以理解为一条观察者将要观察的数据流。
- 观察者（Observer）：它表示一个接收可观察序列推送过来的事件，并对其进行处理的对象。一般情况下，我们会将一个对象或者函数作为观察者进行订阅。
注意： 在 RxJS 中，一个可观察序列被订阅之后，才会真正开始运行。
下面我们可以看一下一个简单的示例，使用 RxJS 创建一个可观察序列并订阅它：
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ----- ---------- - --- --------------------- -- - ------------------------- ------------------------- ---------------------- --- ---------------------- ----- ----- -- ------------------- --------- -- -- ------------------------ ---
输出结果：
Hello World Completed
可以看到，在这里我们定义了一个值为 'Hello' 和 'World' 的可观察序列，并且在订阅之后，将这两个值依次输出。最终输出完成之后，调用了 complete() 方法。
通过观察上面的代码，我们不难发现，使用 RxJS 确实让我们的代码更加简单、灵活和可读。
Angular 中的 Observable
在 Angular 中，我们也可以使用 RxJS 来进行开发。事实上，很多操作本质上就是对 Observable 进行一系列的处理。
Angular 的核心模块 @angular/core 中已经集成了 RxJS，可以直接使用它来引用 Observable，并利用这种方式来处理异步数据。在 Angular 中，我们通常会用 Observable 作为服务的返回值，而这些服务会被注入到需要使用它们的组件中。在这种模式下，我们使用订阅来接收数据，这种方式在实践中非常常用。
下面我们来看一段简单的代码，它使用了一个需求处理服务来获取数据，并在组件中将返回的结果进行订阅。这段代码清晰的展示了 Observable 在 Angular 中的使用：
需求处理服务：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ------------- -
------- - -------------------------
------------------- ----- ----------- --
----------- -------- ------------------ -
----- --- - --------------------------------
------ ---------------------------
-
-组件：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------ - ---- ------------
------ - ------------- - ---- --------------------
------------
--------- -------------
------------ --------------------------
---------- ---------------------------
--
------ ----- --------------- ---------- ------ -
------- -------
------------------- -------------- -------------- --
---------- -
----------------------
-
----------------- -------- ---- -
------------------------------
----------------- -- ----------- - --------
-
-注意： 在实际开发中，我们应该尽量避免在组件中使用订阅产生的嵌套和回调地狱，而应该将之抽象为数据源，通过操作符等手段构建更加优美的数据流。
在这个示例中，我们实现了一个服务 DemandService，并在组件中通过订阅来获取数据，将获取到的值存储到了 demand 变量中。Observable 被用于异步请求数据并处理返回结果，这种方式在实践中非常常用，通常情况下顶部的 Observable 是一个 HTTP 请求。另外，通过订阅获取数据的方式，也是响应式编程经常使用的方法，非常的优雅和灵活。
使用 Observable 操作符
Observable 操作符是 RxJS 中非常重要的一个概念，它可以使我们更加精细地操作 Observable 中的数据流，使得我们能够更加容易地实现一些常见的操作。接下来，我们将介绍一些常用的操作符。
map 操作符
map 操作符是 RxJS 中最常用的操作符之一，它可以对 Observable 中的数据进行转换和映射。通常情况下我们需要对从服务器返回的数据进行转换，以便在客户端上更方便的使用。 map 操作符可以将一个可观察的序列中输入事件序列，变为另外一个输出事件序列：
observable.pipe( map(value => value * 10) ).subscribe(value => console.log(value));
输出结果：
10 20 30 40 50
在这个示例中，我们定义了一个可观察序列 observable，并使用 map 操作符将输入的事件序列从 [1, 2, 3, 4, 5] 转换为 [10, 20, 30, 40, 50]。
filter 操作符
filter 操作符可以根据指定的条件对 Observable 中的数据进行过滤，以过滤出我们所需要的数据。
observable.pipe( filter(value => value >= 3) ).subscribe(value => console.log(value));
输出结果：
3 4 5
在这个示例中，我们定义了一个可观察序列 observable，并使用 filter 操作符将输入的事件序列从 [1, 2, 3, 4, 5] 过滤出大于等于 3 的数。
reduce 操作符
reduce 操作符可以将 Observable 中的多个数据项聚合成一个值，并通过可观察序列返回聚合后的值。
observable.pipe( reduce((total, value) => total + value, 0) ).subscribe(value => console.log(value));
输出结果：
15
在这个示例中，我们定义了一个可观察序列 observable，并使用 reduce 操作符将输入的事件序列从 [1, 2, 3, 4, 5] 聚合为 15。
注意： 使用 RxJS 操作符时，我们应该选择合适的操作符和组合方式，以便更加方便的修改、升级我们的代码。
总结
在本文中，我们详细介绍了 Angular 中 RxJS 的使用，了解了 Observable 和观察者模式，掌握了 Observable 操作符的使用，实现了更加优雅简洁的异步编程风格。希望本文的内容对大家学习 Angular 和 RxJS 方向有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647aaadc968c7c53b06584e2