什么是 RxJS
RxJS 是 Reactive Extensions Library for JavaScript 的缩写，是一个基于观察者模式（Observer Pattern）的异步编程库。它通过与 Angular2 框架结合，使得前端开发人员可以更加便捷地处理异步事件流数据。
RxJS 是一款强大的工具，它可以让我们把事件、请求、和异步数据等等转换成可观察对象，使得它们更便于处理和操作。它也提供了许多强大的操作符，如 map、filter、reduce 等等，让我们能够方便地转化和处理数据。
在 Angular2 SPA 应用中的 RxJS 实践
在 Angular2 应用中，我们通常都会涉及到异步请求和处理大量的数据，这些操作都需要我们处理异步事件流。而 RxJS 正是处理异步事件流的最佳选择。
首先，我们需要安装依赖
我们需要在项目中安装 rxjs：
$ npm install rxjs --save
接下来，我们需要引入 RxJS
在需要使用 RxJS 的组件中引入所需的操作符，如下所示：
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/catch';实践：通过 RxJS 实现搜索框功能
下面我们提供一个搜索框的实现，通过 RxJS 方案实现。
首先，我们需要在 HTML 模板中添加输入框并进行数据绑定：
<input type="text" [(ngModel)]="searchTerm$">
然后，在我们的组件类中定义一个 Subject 对象 searchTerm$，它会根据输入框中的数据变化，发出新的搜索请求：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------- - ---- ---------------
------------
--------- -------------
--------- -
------ ----------- -------------------------
----
--- ----------- ---- -- ---------------- ---- -------
-----
-
--
------ ----- --------------- ---------- ------ -
------------ --------------- - --- ------------------
----------- ------ - ---
------------- --------------
----------- ---- -
-------------------------------------------------
--------------------- -- -
-- ---- -------
---
-
-在 ngOnInit 生命周期中，我们通过监听 searchTerm$ 对象来实现搜索框的功能，这里我们加入了 debounceTime() 函数，用于限制搜索的频率，给予用户一定的操作响应时间。函数返回一个观察者对象。
最后，在搜索请求成功后，我们需要修改代码，将返回回来的数据绑定到 searchResult 中，如下所示：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------- - ---- ---------------
------------
--------- -------------
--------- -
------ ----------- -------------------------
----
--- ----------- ---- -- ---------------- ---- -------
-----
-
--
------ ----- --------------- ---------- ------ -
------------ --------------- - --- ------------------
----------- ------ - ---
------------- --------------
----------- ---- -
-------------------------------------------------
--------------------- -- -
--------------------------------------- -- -
----------------- - --------- -- --------- - ----- -- -
---
---
-
-- ------
-------------------- -------- --------------- -
------ ----------------------------- - -----------
-------- -- -----------
---------- -- -
-----------------
------ ------------------
---
-
-总结
在 Angular2 应用中，RxJS 能够帮助我们更好地处理异步事件流数据，实现更为复杂的业务逻辑。我们可以通过引入 RxJS 的操作符，将异步事件流处理得更加便捷。RxJS 不仅仅是实现搜索框这样的功能，还能实现更为复杂的业务场景，它的强大之处在于它的可组合性，即可以通过组合多个操作符来实现更为复杂的业务逻辑。
参考链接
- RxJS 官方文档：http://reactivex.io/rxjs/
- Angular2 官方文档：https://angular.io/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b6250badd4f0e0ffed5cf1