RxJS 是一个强大的 JavaScript 库，它提供了一套用于处理异步和事件驱动数据流的工具和工具集。本指南将向您介绍 RxJS，教你如何从零开始使用它，并用深入的示例代码帮助你更深入了解 RxJS。
RxJS 是什么？
RxJS 是 reactiveX 的 JavaScript 实现。 它采用一种响应式编程范式，以简单和灵活的方式处理异步代码。 在 RxJS 中，一切都是事件流，由可观察对象表示。 另外，RxJS 内置了丰富的操作符，可用于处理可观察对象，从而实现消息传递和数据转换。
安装 RxJS
在使用 RxJS 之前，您需要通过 npm 安装它。 打开终端窗口并键入：
npm install rxjs
RxJS 中的可观察对象
在 RxJS 中，可观察对象是表示事件序列的核心类型。 以下是一些可观察对象的示例：
- from：将可迭代对象转换为可观察对象。
- of：将特定值转换为可观察对象。
- timer：生成一个发出时间序列的可观察对象。
- interval：生成一个发出整数序列的可观察对象。
- fromEvent：从 DOM 事件生成可观察对象。
- ajax：从 Web API 发出 HTTP 请求并返回响应。
以下是从数组创建可观察对象的示例。
import { from } from 'rxjs';
const observable = from([1, 2, 3, 4, 5]);
observable.subscribe(x => console.log(x));输出：1 2 3 4 5
RxJS 中的操作符
操作符是 RxJS 中用来操作可观察对象的函数。下面是一些操作符：
- map：转换可观察对象的每个项。
- filter：过滤可观察对象的项。
- tap：执行对可观察对象的任意侧面效果。
- take：仅获取可观察对象的前面的项。
- reduce：根据可观察对象的项计算聚合值。
在下面的示例中，map 操作符将可观察对象中的每个项乘以 2。
import { from } from 'rxjs';
import { map } from 'rxjs/operators';
const observable = from([1, 2, 3, 4, 5]);
const multipliedObservable = observable.pipe(
map(value => value * 2)
);
multipliedObservable.subscribe(res => console.log(res));输出：2 4 6 8 10
请注意，我们将 map 操作符应用于 Observable.pipe() 方法。 RxJS 操作符通常返回新的可观察对象，因此我们可以链式调用它们。
RxJS 中的订阅
订阅是与可观察对象建立连接并启动流程的过程。 可观察对象的订阅是通过使用 subscribe() 方法完成的。
import { of } from 'rxjs';
const observable = of(1, 2, 3, 4, 5);
const subscription = observable.subscribe({
next: value => console.log(value),
error: err => console.log('Error: ', err),
complete: () => console.log('Complete')
});需要注意的一点是，订阅返回一个 subscription 对象。 如果您要停止或取消订阅，您可以使用此对象。 如：
subscription.unsubscribe();
结论
在本指南中，我们介绍了 RxJS 可观察对象、操作符和订阅。 RxJS 是一种强大的工具，可以帮助您更轻松地管理和发布异步和事件驱动的代码。 通过使用本指南中的示例，您可以开始使用 RxJS，学习有关这种令人惊叹的工具的更多信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6705f589d91dce0dc8561b7e