什么是 RxJS
RxJS 是一个函数式编程库，它提供了一种处理异步数据流的方法。在 Angular2 中，RxJS 经常被用来处理 HTTP 请求及表单等异步数据流。
RxJS 提供了一些操作符，例如 map、filter 和 reduce 等，它们可以帮助我们修改我们得到的异步数据流。
Angular2 中的 RxJS
在 Angular2 中，我们通常使用 Observable 对象来表示异步数据流。Observable 对象非常类似于 Promise 对象，它们都可以表示异步操作，并且都有一个 then 方法。
Observable 对象和 Promise 对象的区别在于 Observable 对象可以表示多个异步操作，而 Promise 对象只能表示一个异步操作。
RxJS 的操作符
RxJS 提供了很多操作符，它们可以帮助我们处理异步数据流。例如，我们可以使用 map 操作符来修改我们得到的异步数据流，使用 filter 操作符来过滤我们不需要的数据。
下面是一些常用的 RxJS 操作符：
map: 用一个函数来修改 Observable 对象发出的数据。filter: 过滤掉 Observable 对象发出的一些数据。reduce: 用一个函数来把 Observable 对象发出的数据累积起来。debounceTime: 在发出数据之前等待一段时间，如果在等待时间内有新数据，则取消上一次的等待。
Angular2 中的 RxJS 示例
下面我们通过一个简单的示例来了解 Angular2 中的 RxJS。
首先，我们需要在我们的项目中引入 RxJS 库。在 Angular2 中，可以通过以下方式引入 RxJS：
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';接下来，我们看一个简单的示例。
// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Component({
selector: 'my-app',
template: `
<h1>Angular2 with RxJS</h1>
<ul>
<li *ngFor="let user of users | async">{{user.name}}</li>
</ul>
`
})
export class AppComponent {
users: Observable<any>;
constructor(private http: Http) {
this.users = this.http.get('https://jsonplaceholder.typicode.com/users')
.map(res => res.json());
}
}上面的示例展示了如何在 Angular2 中使用 RxJS 来获取远程用户数据，并将其显示在页面上。
在这个示例中，我们使用 Http 服务来获取用户数据。通过 http.get 方法，我们可以得到一个 Observable 对象，它表示异步数据流。
然后，我们使用 map 操作符来修改 Observable 对象发出的数据，把它从 HTTP 响应对象转换为一个 JSON 对象。
最后，我们通过 async 指令显示从 Observable 对象得到的数据。Angular2 会自动订阅这个 Observable 对象，一旦数据到达就会更新页面。
总结
RxJS 是一个处理异步数据流的函数式编程库。在 Angular2 中，它经常被用来处理 HTTP 请求及表单等异步数据流。本篇文章中提供了 RxJS 的一些操作符的示例，并展示了如何在 Angular2 中使用 RxJS。
现在你已经了解了 Angular2 中的 RxJS，你可以开始使用它来处理异步数据流。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6540dbba7d4982a6eba6d93f