随着前端技术的不断发展，越来越多的前端框架和库出现在我们的生产环境中。而Angular作为一款由Google开发的一个强大的前端框架，也具备了在创造出色的用户体验方面的优点。而本文将着重介绍在Angular中如何使用RxJS流。
什么是RxJS
RxJS是一个基于可观察数据流的库。简单来说，RxJS可以让我们将数据流想象成为像一个河流一样的东西，在这个河流中，我们可以监听来自水面上下游的数据，并对其进行一些操作，而我们不必担心数据何时到达，也不必担心数据的来源和流过我们的操作之后到哪里去了。
RxJS可以支持许多不同类型的数据流，例如HTTP请求、用户事件和定时器等等。而且，RxJS 是响应式编程的核心，响应式编程强调的是数据流的控制。
如何在 Angular 中使用 RxJS 流
Angular 已经集成了 RxJS，所以我们不需要额外的安装就可以开始使用 RxJS。我们可以在组件文件中引入RxJS的主要部分：
------ - ---------- - ---- -------
该代码将 Observable 类的所有功能引入到我们的组件中。我们可以在组件中使用以下代码创建一个观察者：
----- ------------ - --- ------------------- -- - -------------------- --------- -------------------- ---
可以看到，我们通过一个纯净的JavaScript代码块来创建了一个新的RxJS 可观察对象。上面的代码块内部是一个“观察者函数”，它可以被用于向外输出和操作数据。
订阅数据流
我们已经可以在组件中创建一个可观察对象，现在就需要创建一个订阅者来订阅数据流，在这个例子中，我们可以使用我们刚才创建的可观察对象：
---------------------------- -- --------------------
可以看到，subscribe() 方法参数是一个函数，它将返回我们的数据流的值，也可以执行我们提供的任何操作。在本例中，我们简单地将它的值打印到控制台上。
创建并链式处理流
在 Angular 中使用 RxJS 流的真正威力在于可以创建由各种操作构成的流，从而提供更强大的组件交互功能。这里，我们将介绍一些可以为您提供帮助并让您在 Angular 中使用 RxJS 流的基本操作。
首先，让我们考虑一个简单的例子：
----- ------ - --------------- ----- ------- - ------------------- -- --- - ---- ---------- -- --- - ----- ----- --------- - --------------------- -- ------------------
在这个例子中，我们首先创建了一个可观察对象 source，设置定时器以1秒的间隔发出值。接着，我们在example操作中设置了映射函数将发出的每个值加上10，然后再通过 filter 函数将小于或等于15的过滤掉，最后订阅 example 可观察对象，并将其结果打印在控制台上。
如何捕获 api 的请求
接下来，让我们看一下如何使用 Angular Http 服务来创建一个可观察对象，并将其与其他操作操作链接起来。假设我们需要对将由后端 Rest API 返回的数据进行过滤和转换。
在这个例子中，我们将创建一个 http 请求，获取到数据后，通过 map 过滤并且转为大写字母输出。整个过程如下：
------ - ---------- - ---- -----------------------
------ - -------- - ---- -------
------ - ---------- --- - ---- -----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- -------------
------------------- ----- ----------- --
----- - ---------
---------- - --------------------
------------ -- ---------------------------------------------------------------
-------------- ---- -- -------------- -- --------
--------- -- --------------------
-
-可以看到上面的代码中 timerData$ 在 3 秒的时间间隔中会向 https://jsonplaceholder.typicode.com/posts/1 这个地址发起一个请求，当请求成功后通过 map 操作将原始的数据转为大写字符串。我们将其绑定至模板上的一个标签内：
------ ---------- - ----- -------
可以看到，我们使用了 Angular 内置的 AsyncPipe，它接收作为Observable的返回值，并自动拆解 observable 并将其值直接输出。
处理最终结果
在处理最终结果方面，我们有一些常用的选项，如 toArray() 和 scan() 等。这里，我们将使用其中一个最常用的 reduce() 函数。
在这个例子中，我们希望使用 reduce() 对通过我们创建的 http 请求返回的元素进行计数。首先，我们设置一个查找元素并计数他们的可观察对象，最后返回计数结果：
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - -------- - ---- -------
------ - ---------- ---- ------ - ---- -----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ----- ----------- --
---------- - --------------------
------------ -- -------------------------------------------------------------
-------------------- ------ -- ----------- - ------------- --
-
-在上面的代码中，我们首先使用标准的 switchMap() 操作，将 http 数据流链接起来，并在 reduce() 函数中将相应的元素数量累加起来。最后我们就可以将计算结果输出到控制台或者模板表达式上了。
结论
本文着重介绍了如何在 Angular 中使用 RxJS 流。通过 RxJS，我们可以更容易地创建可观察对象，订阅和处理数据流，并链接各种操作来实现更高级的交互。要完全掌握RxJS需要一些时间和实践，但随着项目开始的发展，您将会发现RxJS是必不可少的一个库。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671f64702e7021665efd5fc4