RxJS 是 Reactive Extensions for JavaScript 的简称，它是一种用于处理异步数据流的库，它的提出来源于微软的 .NET 平台。Angular2采用RxJS作为其核心API之一，使得Angular2的架构更加灵活和易于管理。下面我们将详解Angular2中RxJS的使用。
RxJS入门
在学习RxJS之前，我们需要了解一些基本的概念和术语：
Observable
Observable 可以看作是一个序列，它表示在一段时间内从一个数据源中产生的多个数据项（可以是异步的）。在Angular2中，有许多事件都是以 Observable 的形式发布，例如 HTTP 请求、DOM 事件等等。
Observer
Observer 是一个代表 Observable 订阅者的对象。它定义了 Observable 中要如何发送数据给订阅者的方法，通常包括以下3个回调函数：
- next: Observable 产生下一个数据项时的回调函数；
- error: Observable 发生错误时的回调函数；
- complete: Observable 完成数据项的发送时的回调函数。
Subscription
Subscription 表示 Observable 执行的生命周期，通常由 Observables 上的 subscribe 方法返回。当调用 unsubscribe 方法时，Subscription 会执行清理动作，以避免内存泄漏。
Operator
Operator 是用来操作 Observable 和构建 Observable 链的函数。一般用于转换、组合和过滤 Observable。常见的 Operator 有 map, filter, reduce, take 等等。
RxJS的应用
下面我们将列举几个RxJS在Angular2中的使用场景。
匹配输入事件
TextInput 是一个输入框，当用户在输入框中输入信息时，我们需要通过 RxJS 来处理输入，我们可以监听键盘事件实现。
------ - --------- - ---- ----------------
------ - ---------- - ---- ------------------
------ --------------------------------
------------
--------- -----------
--------- -
------ ----------- --
----------- ------ ------
-
--
------ ----- ------------ -
------- ------ - ---
------------- -
--- ------ - --------------------------------
---------------------------- --------
------------------ -------------- -- -
----------- - ---------------------------------------
---
-
-在上述代码中，我们使用了 Observable 中的 fromEvent 方法创建了一个针对 input 事件的 Observable，当用户输入时，输入框会触发该事件，从而将输入框的值保存到了组件的 output 属性上。
实现 HTTP 请求
HTTP 通信是 Ajax 出现以来的一个重要特性，而 Angular2 为我们提供了一个 HttpClientModule 来处理 HTTP 请求。通过 HttpClientModule，我们可以使用 RxJS 中的 Operator 来处理 HTTP 的响应结果。
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
--------- -
-----------------
----
--- ----------- ----- -- ----------------------------
-----
-
--
------ ----- ------------ -
------- -----------
------------------- ----- ----------- -
--------------------------------------------
--------------------- ---- -- -
----------- - -----------------
---
-
-在上述代码中，我们使用 HttpClientModule 执行了一个 GET 请求，并通过 subscribe 方法订阅了 HTTP 请求的响应结果。在回调函数中我们通过 response.results 获取到了电影列表数据，并赋值给了组件的 movies 属性。
处理复杂场景
RxJS 最强大的地方在于它可以轻松地支持复杂的场景。假设我们需要实现一个自动补全的功能，当用户在输入框中输入信息时，我们需要从服务器获取，携带该关键字的提示列表，通过 RxJS 我们可以像下面一样处理这个复杂场景。
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- ------------------
------ ------------------------
------ ---------------------------------
------ -----------------------------------------
------ ------------------------------
------------
--------- -----------
--------- -
------ ----------- --
----
--- ----------- ---- -- -------------------
-----
-
--
------ ----- ------------ -
----- --------------
------------------- ----- ----------- -
--- ------ - --------------------------------
--- ------ - ---------------------------- --------
------------ -------------- -- ---------------------------------------
------------------
------------------------
------------------------ -- ----------------------------------------------
--------------------- ---- -- -
--------- - ---------------------
---
-
-在上述代码中，我们通过 RxJS 创建了一个支持自动补全的组件，当用户在输入框中输入内容时，我们通过 fromEvent 方法获取 Observable，使用 map 和 debounceTime 等 Operator 进行前置处理。使用 switchMap 连接了从 input$ 到 HTTP 请求这两部分的操作，这里我们使用 switchMap 而不是使用一般的 map 方法，是因为每次触发 input$，我们都需要取消上一次的请求，防止请求叠加，造成服务器压力过大。
总结
RxJS 可以处理许多 Angular2 中常见的异步数据流操作，比如：HTTP、事件、定时器等等。对 Angular2 响应式编程的实现是一个必不可少的工具。但是，在使用 RxJS 的途中我们需要学会通过 Operator 和 Observable 的组合使用，以实现不同的场景需求。希望通过本篇文章能让大家更好地理解RxJS在Angular2中的应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f9c3cff6b2d6eab312b821