首页　>　文章列表　>　使用 JavaScript 和 RxJS 进行响应式编程

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

107 2023-09-07

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

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

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

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

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

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 方法并提供回调函数。在这种情况下，回调函数只是将发出的数字记录到控制台。

输出

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 上。映射运算符采用一个回调函数，该函数通过将每个发出的数字加倍来对其进行转换。然后将结果值传递给订阅者的回调函数。

输出

过滤器运算符

过滤器运算符允许我们根据条件有选择地过滤掉 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，并使用订阅者的回调函数将每个发出的数字记录到控制台。