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
