2023使用 JavaScript 和 RxJS 进行响应式编程

反应式编程是一种处理异步数据流的编程范例。它是一种编写代码的方式，可以更快速地响应变化，并且可以更有效地处理事件和数据流。

在反应式编程中，数据被表示为事件流。这些事件可以是从用户输入到网络请求再到数据库更新的任何事件。然后程序订阅这些事件，并在事件发生时做出反应。

这种编程方法有很多优点。首先，它使处理异步数据变得更容易。在传统编程中，异步数据可能难以处理，因为很难知道数据何时可用。另一方面，反应式编程通过将异步数据视为事件流，以更自然的方式处理异步数据。

其次，反应式编程有助于提高代码的性能。通过订阅事件，一旦有新数据可用，您的代码就可以收到通知，这样它就不必轮询数据或等待事件发生。

最后，反应式编程可以帮助您的代码更易于维护。通过将数据视为事件流，您的代码将变得更具声明性，并且更容易理解代码的不同部分如何相互交互。

RxJS

RxJS 是一个 JavaScript 库，提供反应式编程 API。它是一个流行的库，许多流行的 JavaScript 框架都使用它，例如 Angular 和 React。

RxJS 提供了许多使其非常适合响应式编程的功能。这些功能包括 -

• 可观察对象− Observables 是 RxJS 的基本构建块。它们表示事件流，可用于表示任何类型的数据，包括数字、字符串、对象和数组。

• 运算符− 运算符是可用于转换、过滤和组合 Observable 的函数。 RxJS 中有大量可用的运算符，这使得使用 Observable 执行各种操作成为可能。

• 调度程序− 调度程序用于控制 Observables 的时间。它们可用于使 Observables 在特定时间触发，或延迟事件的发射。

安装 RxJS

要开始使用 RxJS，我们需要安装它。打开终端并运行以下命令 -

npm install rxjs

安装完成后，我们就可以开始探索 RxJS 反应式编程的威力了。

创建可观察对象

Observables 是 RxJS 的核心。它们代表订阅者可以观察到的数据流。

让我们首先创建一个发出数字序列的简单 Observable -

示例

import { Observable } from 'rxjs';

const numberObservable = new Observable((observer) => {
   let count = 0;

   const interval = setInterval(() => {
      observer.next(count);
      count++;

      if (count > 5) {
         clearInterval(interval);
         observer.complete();
      }
   }, 1000);
});

numberObservable.subscribe((number) => {
   console.log(number);
});

说明

在上面的代码中，我们使用 RxJS 中的 Observable 类创建一个 Observable。在构造函数内部，我们定义了发出值的逻辑。在此示例中，我们使用 setInterval 每秒发出一个数字。一旦计数达到 5，我们就停止间隔并调用observer.complete() 来发出流结束的信号。

为了观察 Observable 发出的值，我们调用 subscribe 方法并提供回调函数。在这种情况下，回调函数只是将发出的数字记录到控制台。

输出

0 
1
2 
3 
4
5

RxJS 中的运算符

RxJS 提供了广泛的运算符，使我们能够转换、过滤、组合和操作 Observables 发出的数据。让我们看一下一些常见的运算符。

地图操作符

map 运算符允许我们转换 Observable 发出的值。例如，让我们修改之前的示例，将发出的数字加倍 -

示例

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

const numberObservable = new Observable((observer) => {
   let count = 0;

   const interval = setInterval(() => {
      observer.next(count);
      count++;

      if (count > 5) {
         clearInterval(interval);
         observer.complete();
      }
   }, 1000);
});

numberObservable
   .pipe(map((number) => number * 2))
   .subscribe((number) => {
      console.log(number);
   });

说明

在此代码中，我们使用管道方法将映射运算符链接到我们的 Observable 上。映射运算符采用一个回调函数，该函数通过将每个发出的数字加倍来对其进行转换。然后将结果值传递给订阅者的回调函数。

输出

0
2
4
6
8 
10

过滤器运算符

过滤器运算符允许我们根据条件有选择地过滤掉 Observable 发出的值。让我们在前面的示例中添加一个过滤器，以仅发出偶数 -

示例

import { Observable } from 'rxjs';
import { filter } from 'rxjs/operators';

const numberObservable = new Observable((observer) => {
   let count = 0;

   const interval = setInterval(() => {
      observer.next(count);
      count++;

      if (count > 5) {
         clearInterval(interval);
         observer.complete();
      }
   }, 1000);
});

numberObservable
   .pipe(filter((number) => number % 2 === 0))
   .subscribe((number) => {
      console.log(number);
   });

说明

在提供的代码中，我们创建了一个名为 numberObservable 的 Observable，它发出一系列数字。 Observable 使用 setInterval 发出从 0 开始的数字，每秒递增 1。发出数字 5 后，间隔被清除，Observable 使用observer.complete() 发出完成信号。

接下来，我们使用管道方法将过滤运算符应用于 numberObservable。过滤器运算符采用定义条件的回调函数。它过滤掉不满足条件的值，只允许偶数通过。

最后，我们订阅过滤后的 Observable，并使用订阅者的回调函数将每个发出的数字记录到控制台。

输出

0
2
4

结论

总之，使用 JavaScript 和 RxJS 进行响应式编程提供了一种强大而有效的方法来处理异步数据流和构建响应式应用程序。通过拥抱 Observables 的概念并利用 RxJS 提供的丰富的运算符集，开发人员可以以声明式且优雅的方式轻松操作、转换和组合数据流。

通过本文讨论的示例，我们了解了如何创建 Observables、应用映射和过滤器等运算符来转换和过滤发出的值，以及订阅 Observables 来接收和处理数据。 RxJS 通过提供一致且可组合的方法简化了复杂异步流的管理。