本文将介绍 Angular 2 中使用 RxJS 编程时的基础操作和组合操作。RxJS 是一个强大的异步编程库，它可以让我们以响应式编程的方式处理异步操作。在 Angular 中，RxJS 被广泛地应用于 HTTP 请求、路由事件、表单控制等等场景。
什么是 RxJS
RxJS 是 ReactiveX 在 JavaScript 中的实现。ReactiveX 是一个函数式编程库，它提供了一套异步编程的工具箱，让我们可以轻松地处理异步数据流。
在 ReactiveX 中，数据流是通过 observables（可观察对象）来表示的。一个 observable 可以发送多个值，还可以告诉我们何时完成（complete）或出错（error）。我们可以通过操作符（operators）对 observable 进行一系列操作，比如过滤、映射、合并等等，从而得到我们想要的数据。
RxJS 是 ReactiveX 的 JavaScript 实现。它将 observables 和操作符封装成了一个强大的异步编程库。在 Angular 2 中，我们可以使用 RxJS 来处理异步操作，比如 HTTP 请求、路由事件、表单控制等等。
基础操作
创建 observable
在 RxJS 中，我们可以通过 Observable.create 方法手动创建一个 observable。这个方法接受一个函数作为参数，这个函数会接受一个观察者（observer）作为参数。我们可以通过 observer 的 next 方法来发送数据，通过 error 方法来发送错误，通过 complete 方法来标记完成。
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ----- ---------- - -------------------------- -- - ----------------- ----------------- ----------------- -------------------- --- ---------------------- ----- ----- -- ------------------- --------- -- -- ----------------------- --- -- --- -- - -- - -- - -- --------展开代码
在 Angular 2 中，我们可以使用 RxJS 的 http 模块来发送 HTTP 请求。这个模块返回的是一个 observable，我们可以通过 subscribe 方法来订阅这个 observable。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ---------- - ---- ----------------------- ------------ --------- ----------- --------- --- ----- - ----- --- -- ------ ----- ------------ - ----- - ---------------------------------------------------------------------- ------------------- ----- ----------- -- -展开代码
在上面的例子中，value 是一个 observable，它会发送一个 HTTP 请求并返回一个 string 类型的响应。我们使用了管道运算符 | async 来订阅这个 observable。
操作符
在 RxJS 中，我们可以使用各种操作符对 observable 进行操作。比如，我们可以使用 map 操作符对数据流进行映射。
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ------ - --- - ---- ----------------- ----- ---------- - -------------------------- -- - ------------------- ------------------- ------------------- -------------------- --- ---------------- --------- -- -------------------- ------------- ----- ----- -- ------------------- --------- -- -- ----------------------- --- -- --- -- - -- - -- - -- --------展开代码
在上面的例子中，我们使用了 map 操作符将数据流中的每个值转换成大写字母。
在 Angular 2 中，我们可以通过 HTTP 模块返回的 observable 应用各种操作符。比如，我们可以使用 map 操作符解析响应体中的数据。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ---------- - ---- ----------------------- ------ - --- - ---- ----------------- --------- ---- - ------ ------- ----- ------- - ------------ --------- ----------- --------- --- ---- - ----- - ---- --- -- ------ ----- ------------ - ---- - ------------------------------------------------------------------------- ------------ -- -------------- -- ------------------- ----- ----------- -- -展开代码
在上面的例子中，我们使用了 map 操作符将 HTTP 响应体中的数据解析成一个 Post 对象。我们使用了管道运算符将 post 转换成了一个 Observable<Post> 类型，在模板中使用了 json 管道来显示这个对象。
订阅
在 RxJS 中，我们需要手动订阅 observable。订阅后，我们可以接收到该 observable 发送的所有数据。如果我们想停止订阅，可以调用 unsubscribe 方法来取消订阅。
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ----- ---------- - --- ------------------- -- - --- - - -- ----- -------- - -------------- -- - ------------------- -- ------ ------ -- -- ------------------------ --- ----- ------------ - ---------------------- ----- ----- -- ------------------- --------- -- -- ----------------------- --- ------------- -- --------------------------- ------ -- --- -- - -- - -- - -- -展开代码
在上面的例子中，我们创建了一个每秒发送一个递增数字的 observable。我们订阅了这个 observable，并在 5 秒后取消了订阅。
在 Angular 2 中，我们可以在组件的 ngOnInit 生命周期中订阅 observable，并在 ngOnDestroy 生命周期中取消订阅。
-- -------------------- ---- ------- ------ - ---------- ------- --------- - ---- ---------------- ------ - ----------- ------------ - ---- ------- ------------ --------- ----------- --------- --- ----- --- -- ------ ----- ------------ ---------- ------- --------- - ------ ------- ------------- ------------- ------------- -- ---------- - ----------------- - --- ------------------- -- - --- - - -- ----- -------- - -------------- -- - ------------------- -- ------ ------ -- -- ------------------------ ------------------ -- - ---------- - ------ --- - ------------- - -------------------------------- - -展开代码
在上面的例子中，我们使用了 ngOnInit 和 ngOnDestroy 生命周期来管理订阅。在 ngOnInit 生命周期中订阅 observable，在 ngOnDestroy 生命周期中取消订阅，这样可以避免内存泄漏。
组合操作
除了基础操作之外，RxJS 还提供了许多强大的组合操作。这些操作符可以让我们在数据流中实现更加复杂的逻辑。下面是几个常用的组合操作符。
mergeMap
mergeMap 操作符可以将一个 observable 转换为另一个 observable。它接受一个函数作为参数，这个函数会接受一个值并返回一个新的 observable。然后，mergeMap 会将新的 observable 合并到数据流中。
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - -------- - ---- ----------------- ----- ---------- - ----- -- --- ---------------- -------------- -- -------- - ---- ------------- ----- ----- -- ------------------- --------- -- -- ----------------------- --- -- --- -- -- -- -- -- -- -- --------展开代码
在上面的例子中，我们使用了 of 方法创建了一个 observable，这个 observable 会发送 1、2、3 三个值。然后，我们使用了 mergeMap 操作符将每个值都转换成一个新的 observable，这个新的 observable 会发送这个值乘以 10 的结果。
在 Angular 2 中，我们可以使用 mergeMap 操作符将多个 HTTP 请求合并成一个 observable。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ---------- - ---- ----------------------- ------ - -------- - ---- ----------------- --------- ---- - ----- ------- ------ ------- - ------------ --------- ----------- --------- --- ---- - ----- - ---- --- -- ------ ----- ------------ - ---- - --------------- --- ------ -------------------------------------------------------- ----------------- -- --------------------------------------------------------------------------------- -- ------------------- ----- ----------- -- -展开代码
在上面的例子中，我们先发送了一个 HTTP GET 请求，它会返回一个包含 id 字段的响应体。然后，我们使用这个 id 字段作为参数向另一个 URL 发送了一个 HTTP GET 请求，它会返回一个包含用户信息的响应体。我们使用了 mergeMap 操作符将这两个请求合并成了一个 observable。
switchMap
switchMap 操作符可以将一个 observable 转换为另一个 observable。它接受一个函数作为参数，这个函数会接受一个值并返回一个新的 observable。然后，switchMap 会等待新的 observable 发送数据，然后将它们合并到数据流中。如果一个新的值到来，旧的 observable 还没有完成，switchMap 会取消旧的 observable，将新的 observable 合并到数据流中。
-- -------------------- ---- ------- ------ - --------- - ---- ------- ------ - --------- - ---- ----------------- ----- ------ - --------------------------------- ---------------- - ------ ---- ---------------------------------- ----- ---------- - ----------------- --------- ---------------- ------------ -- --------------- ------------- ----- ----- -- ------------------- --------- -- -- ----------------------- --- -- --- -- - -- - -- - -- - -- ---展开代码
在上面的例子中，我们创建了一个按钮，然后使用 fromEvent 方法将它的点击事件转换为一个 observable。然后，我们使用了 switchMap 操作符将每个点击事件都转换成一个 observable，这个新的 observable 会每秒发送一个递增的数字。
在 Angular 2 中，我们可以使用 switchMap 操作符将多个 HTTP 请求合并成一个 observable。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ---------- - ---- ----------------------- ------ - --------- - ---- ----------------- --------- ---- - ----- ------- ------ ------- - ------------ --------- ----------- --------- --- ---- - ----- - ---- --- -- ------ ----- ------------ - ---- - --------------- --- ------ -------------------------------------------------------- ------------------ -- --------------------------------------------------------------------------------- -- ------------------- ----- ----------- -- -展开代码
在上面的例子中，我们先发送了一个 HTTP GET 请求，它会返回一个包含 id 字段的响应体。然后，我们使用这个 id 字段作为参数向另一个 URL 发送了一个 HTTP GET 请求，它会返回一个包含用户信息的响应体。我们使用了 switchMap 操作符将这两个请求合并成了一个 observable，但是如果有一个新的请求到来，旧的请求还没有完成，switchMap 会取消旧的请求，将新的请求合并到数据流中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bffd60314edc26845f7e96
