随着前端技术的发展，现代 Web 应用的需求越来越高。用户期望更丰富、更灵活的交互方式，同时要求应用具有更高的性能和响应能力。这种情况下，Reactive Programming 模式应运而生。
Reactive Programming 是指一种编程模式，它将异步数据流作为基本元素，用数据流的变化来驱动应用。在使用 Reactive Programming 的应用中，多个数据源可以同时发送数据，应用会根据数据的变化自动响应相应的行为。这种编程方式可以大幅度提高应用程序的响应性、可维护性和复用性。
RxJS 是一种流行的 Reactive Programming 库，在前端开发中得到了广泛应用。它是被设计用来处理异步和事件驱动的数据流的库，它提供了一组操作符、函数和类，用于处理和操作数据流。在使用 RxJS 时，我们可以把异步操作、事件和 AJAX 请求组合为一个事件序列，然后用各种操作符处理这个序列。下面，我们将带你进入 RxJS 的世界，并带你学习如何使用它的各种功能。
RxJS 的安装和使用
使用 npm 的方式安装 RxJS 是最为推荐的方式。在终端中执行下面的命令即可完成 RxJS 的安装。
npm install rxjs
安装完成后，我们就可以在我们的项目中使用 RxJS 了。我们可以通过 import 或者 require 引入 RxJS：
// ES6 标准下使用 import 方式
import { of } from 'rxjs';
// 或者使用 CommonJS 标准下的 require 方式
const { of } = require('rxjs');通过上述代码，我们就可以使用 RxJS 的 of 操作符来创建一个 Observable 对象。
RxJS 的核心概念
在学习 RxJS 之前，我们需要了解一些重要的、最核心的概念。
Observable
Observable 是代表一个异步数据源的对象，在 Observable 定义好之后，它不会立即执行，而是需要触发订阅才能开始执行。一般来说，Observable 可以向订阅者（也就是观察者）发送任意数量的值，也可以通过 onComplete() 或 onError() 方法结束。在 RxJS 中，Observable 是一个构造函数，我们可以通过各种操作符和方法来创建一个 Observable 对象。
Observer
Observer 是一个对象，它定义了当 Observable 对象发出数据时，要如何处理数据。Observer 包含了三个方法：
- next(value): 处理 Observable 对象发出的数据。
- error(error): 处理 Observable 中发生的错误。
- complete(): 通知 Observer，Observable 已经完成了。
虽然把 Observable 和 Observer 看作是两个不同的对象，但本质上它们是相互关联的。Observable 对象可以是多个 Observer 的订阅者。这种机制就被称作“多播（Multicasting）”。
Operators
操作符是函数或者方法，它们用来操作 Observable 对象，产生一个新的 Observable 对象。操作符可以为 Observable 对象添加生命周期钩子，从而实现一些更高级的功能，如：过滤器、变换、聚合和错误处理等功能。操作符是 RxJS 中最为核心的概念之一，在实际应用中我们会经常使用各种操作符来操纵 Observable。
Subscription
Subscription 是一个物理连接，它连接了 Observable 和 Observer。当 Subscription 连接成功之后，Observable 对象开始向 Observer 发送数据。Subscription 对象拥有一些用于取消连接的方法，它可以帮助我们避免内存泄漏。
下面，我们将通过一些简单的示例来介绍 RxJS 的基础概念和使用。
示例代码
import { of } from 'rxjs';
const observable = of(1, 2, 3); // 创建 Observable 对象
observable.subscribe({ // 订阅 Observable 对象
next: x => console.log(x), // 处理 Observable 发出的数据
error: err => console.error(err), // 处理 Observable 中发生的错误
complete: () => console.log('completed') // 通知 Observer，Observable 已经完成了
}); 上述代码中，我们使用 of 操作符创建了一个 Observable 对象，紧接着我们调用了 subscribe 方法来订阅这个 Observable 对象。在 subscribe 方法中，我们传入了一个 Observer 对象，用于处理 Observable 对象发出的数据。在这个示例中，我们只是简单地将数据打印到控制台中。
在 RxJS 中，我们有很多种创建 Observable 对象的方法，下面我们介绍几种常见的方法。
创建 Observable 对象
of 操作符
of 操作符用于创建一个 Observable 对象，它会直接发出我们指定的值，一旦把全部数据都发出之后，它就会自动结束。
import { of } from 'rxjs';
const observable = of(1, 2, 3);
observable.subscribe({
next: x => console.log(x),
error: err => console.error(err),
complete: () => console.log('completed')
}); // 输出结果: 1, 2, 3, 'completed'在这个示例中，我们创建了一个 Observable 对象，它会依次发出数字 1、2、3，最后通知 Observer，Observable 已经完成。
from 操作符
from 操作符用于将数组、类数组或迭代对象转换为 Observable 对象。
-- -------------------- ---- ------- ------ - ---- - ---- ------- ----- ----- - --- -- --- -- ------ ----- ---------- - ------------ -- ------ ---------- ---------------------- -- --- ---
在这个示例中，我们使用 from 操作符将数组转换为了 Observable 对象。
Operators 操作符的使用
map 操作符
map 操作符用于转换 Observable 发出的每个数据项。
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - --- - ---- ----------------- ----- ---------- - ----- -- --- ---------------- -- -- ----------- ----- -- - - -- -- -- --- ---------- ------------- ----- - -- -------------- --- -- ----- -- -- -
在这个示例中，我们使用 pipe 方法引入了 map 操作符，并使用 map 操作符将 Observable 所发出的数据都乘以了 2。
filter 操作符
filter 操作符用来过滤 Observable 发出的值。filter 接受一个 Predicate 函数，当 Predicate 函数返回 true 时，filter 就会将该值送达 Observer，否则 filter 将会直接忽略该值。
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - ------ - ---- ----------------- ----- ---------- - ----- -- -- -- -- -- -- --- ---------------- -------- -- - - -- ------------- ----- - -- -------------- --- -- ----- -- -- -
在这个示例中，我们使用 filter 过滤了 Observable 所发出的值，只保留大于 5 的值。
总结
在本文中，我们介绍了 Reactive Programming 及 RxJS 的基础概念、操作符和示例代码。RxJS 提供了一些非常强大的功能，如：创建高级的观察者、使用操作符处理数据等等。希望这篇文章可以帮助你更好地理解 RxJS 的相关概念，并能够更加流畅地使用 RxJS。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0f09683d39b488154bdc8