在现代的前端开发中，异步编程已经成为了不可避免的一个方向。而在 Angular4 中，RxJS 就是个非常好的异步操作库。那么本文就要详细解析 Angular4 中 RxJS 的应用。
什么是 RxJS？
RxJS 是 Reactive Extensions 的缩写，它是 ReactiveX 在 JavaScript 中的实现。RxJS 和 ReactX 一样，都是一种基于可观察对象（Observable）的响应式编程库，主要用于处理异步事件的编程模型。
Angular4 中的 RxJS
Angular4 中内置了 RxJS 这个库，因此我们可以直接在自己的应用程序中使用。
在 Angular4 中，很多地方都使用了 RxJS，比如说：
- http 请求
- 表单的输入值变化检测
- Redux 状态管理库中 store 的订阅
- ...etc
RxJS 的应用场景
在前端应用中，我们经常会遇到复杂的异步操作，比如说请求服务器数据、处理用户输入、以及 Redux 状态管理等等。这些操作中我们需要进行合并、映射数据、组合多个操作等复杂异步操作。这时候，RxJS 就显得非常有用。
相对于传统的回调式的异步操作，RxJS 能够更好地处理复杂异步操作，提供更加直观、灵活的异步操作模式。
RxJS 的基本操作符
RxJS 提供了一系列的操作符，用于方便的处理可观察对象。以下是一些常用的操作符：
1. map()
用于将可观察对象的数据流中的值映射成一个新值。以下是一个简单的示例：
import { map } from 'rxjs/operators'; const numbers = from([1, 2, 3, 4]); const doubled = numbers.pipe(map(number => number * 2)); doubled.subscribe(x => console.log(x)); // Output：2, 4, 6, 8
2. filter()
用于筛选可观察对象的数据流中符合条件的值：
import { filter } from 'rxjs/operators'; const numbers = from([1, 2, 3, 4, 5]); const evenNumbers = numbers.pipe(filter(number => number % 2 === 0)); evenNumbers.subscribe(x => console.log(x)); // Output: 2, 4
RxJS 的订阅
RxJS 中的订阅指的是 Observable对象 订阅一个 Observer。一旦有新的事件产生，订阅者就会得到通知并执行相应的回调函数。
下面是一个简单的订阅示例：
import { of } from 'rxjs'; const source = of('Hello RxJS!'); source.subscribe(x => console.log(x)); // Output: 'Hello RxJS!'
此处我们使用 of() 函数来创建一个 Observable 的简单示例，并用 subscribe() 方法订阅这个 Observable 对象。
RxJS 中的 Subject
Subject 是一个特殊的 Observable，它能够多播。在 Subject 中注册多个订阅者，当 Subject 发送数据时，所有订阅者都将收到通知并执行相应的回调函数。
下面是一个示例：
-- -------------------- ---- ------- ------ - ------- - ---- ------- ----- ------- - --- ---------- ------------------- ----- --- -- ----------------------- ------ --- ------------------- ----- --- -- ----------------------- ------ --- ---------------- ---------------- -- ------- -- ---------- - -- ---------- - -- ---------- - -- ---------- -展开代码
以上程序中，我们创建了一个新的 Subject 对象，并进行了两次的通知。注册了两个不同的订阅者，两个订阅者分别接收到了相应的数据流。
RxJS 中的 Operators
在 RxJS 中，Operator 是一个纯函数，它接收一个 Observable 对象并返回另一个 Observable 对象。在纯函数的同时，这些 Operator 通常都是惰性的，只在真正需要时才会执行。
以下是一个 map() 操作的示例：
-- -------------------- ---- ------- ------ - ---- - ---- ------- ------ - --- - ---- ----------------- ----- ------- - -------- -- -- -- ---- ----- ------ - ------- ------- -- - - --- ----- -------------- - ---------------- ------------------------------- -- --------------------- -- ------- -- -- -- --- --展开代码
在这个例子中，我们使用了 map() 操作符来对 Observable 的数据流进行操作，并使用 subscribe() 方法订阅这个新的 Observable 对象。
RxJS 中的 Flow Control Operators
Flow Control Operators 可以控制数据流，包括创建、合并、组合和转换数据流等。以下是一个 concatMap() 操作的示例：
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - --------- - ---- ----------------- ----- ------- - ------- ---- ----- ----- ------ - -------------------------- -- ------------- ---------- ------------- ------------------ -- ---------------- -- ------- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --展开代码
在这个例子中，我们先定义了一个包含三个字母的 Observable 对象 letters，然后使用 concatMap() 操作符将每个字母映射成一个新的 Observable，并将这些新的 Observable 依次合并。
RxJS 中的 Subject 和 Reactive Programming 的应用
Reactive Programming 其实是一种更高级的应用模式，其核心在于响应异步数据流，它可以更好地组织和管理异步编程代码。
在 Reactive Programming 中，Subject 扮演了重要的角色，它能够把任何异步数据流转换成一个高级 Observable 对象，从而做到更加灵活和自然的异步编程。
我们可以使用 Subject 对象来创建一个宏观的数据流，然后在希望的地方进行精细的流操作。以下是一个 Subject 的简单示例：
-- -------------------- ---- ------- ------ - ------- - ---- ------- ----- ------- - --- ---------- ------------------- ----- --- -- ----------------------- ------ --- ------------------- ----- --- -- ----------------------- ------ --- ----- ---------- - -------- -- ---- ------------------------------展开代码
在以上示例中，我们创建了一个 Subject 对象，并定义了 A 观察者和 B 观察者。使用 from() 方法创建一个 Observable 对象，并将它作为 subject.subscribe() 方法的参数，这样我们就创建了一个 Subject 对象，并在相应的订阅者中观察到了 Observable 对象的数据流。
总结
RxJS 是一个强大的异步编程库，它能够更好地组织和管理复杂的异步编程代码。在 Angular4 中，RxJS 是一个非常重要的模块，可帮助我们处理复杂的异步操作。
本文介绍了 RxJS 的基本操作符、订阅、Subject 和 Reactive Programming 的应用。学习以上内容，并加以实践，相信你可以更轻松高效地处理你的异步操作了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659e779badd4f0e0ff7678d7
