Reaktive Programmierung mit JavaScript und RxJS

Reaktive Programmierung ist ein Programmierparadigma, das asynchrone Datenflüsse verarbeitet. Es handelt sich um eine Möglichkeit, Code zu schreiben, der schneller auf Änderungen reagiert und Ereignisse und Datenflüsse effizienter verarbeitet.

Bei der reaktiven Programmierung werden Daten als Ereignisstrom dargestellt. Diese Ereignisse können alles sein, von Benutzereingaben über Netzwerkanfragen bis hin zu Datenbankaktualisierungen. Das Programm abonniert dann diese Ereignisse und reagiert, wenn sie auftreten.

Diese Programmiermethode hat viele Vorteile. Erstens erleichtert es die Arbeit mit asynchronen Daten. Bei der herkömmlichen Programmierung kann die Handhabung asynchroner Daten schwierig sein, da es schwierig ist zu wissen, wann die Daten verfügbar sein werden. Reaktive Programmierung hingegen verarbeitet asynchrone Daten auf natürlichere Weise, indem sie sie als Ereignisstrom behandelt.

Zweitens trägt reaktive Programmierung dazu bei, die Leistung Ihres Codes zu verbessern. Durch das Abonnieren von Ereignissen kann Ihr Code benachrichtigt werden, sobald neue Daten verfügbar sind, sodass er keine Daten abfragen oder auf das Eintreten eines Ereignisses warten muss.

Schließlich kann die reaktive Programmierung dazu beitragen, dass Ihr Code besser wartbar ist. Durch die Behandlung von Daten als Ereignisstrom wird Ihr Code deklarativer und es ist einfacher zu verstehen, wie verschiedene Teile des Codes miteinander interagieren.

RxJS

RxJS ist eine JavaScript-Bibliothek, die eine reaktive Programmier-API bereitstellt. Es handelt sich um eine beliebte Bibliothek, die von vielen gängigen JavaScript-Frameworks wie Angular und React verwendet wird.

RxJS bietet viele Funktionen, die es ideal für die reaktive Programmierung machen. Zu diesen Funktionen gehören -

• Observablen− Observablen sind die Grundbausteine ​​von RxJS. Sie stellen Ereignisströme dar und können zur Darstellung jeder Art von Daten verwendet werden, einschließlich Zahlen, Zeichenfolgen, Objekten und Arrays.

• Operatoren− Operatoren sind Funktionen, die zum Transformieren, Filtern und Kombinieren von Observablen verwendet werden können. In RxJS steht eine Vielzahl von Operatoren zur Verfügung, die es ermöglichen, verschiedene Operationen mit Observables durchzuführen.

• Scheduler− Der Scheduler wird verwendet, um das Timing von Observables zu steuern. Sie können verwendet werden, um Observable zu bestimmten Zeiten zum Auslösen zu bringen oder um die Emission von Ereignissen zu verzögern.

Installieren Sie RxJS

Um RxJS verwenden zu können, müssen wir es installieren. Öffnen Sie ein Terminal und führen Sie den folgenden Befehl aus -

npm install rxjs

Nachdem die Installation abgeschlossen ist, können wir damit beginnen, die Leistungsfähigkeit der reaktiven RxJS-Programmierung zu erkunden.

Erstellen Sie Observablen

Observablen sind das Herzstück von RxJS. Sie stellen einen Datenstrom dar, den Abonnenten beobachten können.

Beginnen wir damit, ein einfaches Observable zu erstellen, das eine Zahlenfolge ausgibt –

Beispiel

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);
});

Anleitung

Im obigen Code erstellen wir ein Observable mithilfe der Observable-Klasse in RxJS. Innerhalb des Konstruktors definieren wir die Logik zum Ausgeben von Werten. In diesem Beispiel verwenden wir setInterval, um jede Sekunde eine Zahl auszugeben. Sobald die Anzahl 5 erreicht, stoppen wir das Intervall und rufen Observer.complete() auf, um das Ende des Streams zu signalisieren.

Um die vom Observable ausgegebenen Werte zu beobachten, rufen wir die subscribe-Methode auf und stellen eine Rückruffunktion bereit. In diesem Fall protokolliert die Callback-Funktion einfach die ausgegebene Nummer an der Konsole.

Ausgabe

0 
1
2 
3 
4
5

Operatoren in RxJS

RxJS bietet eine breite Palette von Operatoren, mit denen wir die von Observables ausgegebenen Daten transformieren, filtern, kombinieren und manipulieren können. Schauen wir uns einige gängige Operatoren an.

Kartenbetreiber

map-Operator können wir die von einem Observable ausgegebenen Werte transformieren. Ändern wir zum Beispiel das vorherige Beispiel, um die ausgegebene Zahl zu verdoppeln –

Beispiel

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);
   });

Anleitung

In diesem Code verwenden wir die Pipeline-Methode, um den Mapping-Operator mit unserem Observable zu verknüpfen. Der Mapping-Operator übernimmt eine Rückruffunktion, die jede ausgegebene Zahl durch Verdoppelung umwandelt. Der resultierende Wert wird dann an die Rückruffunktion des Abonnenten übergeben.

Ausgabe

0
2
4
6
8 
10

Filteroperator

Der Filteroperator ermöglicht es uns, von einem Observable ausgegebene Werte basierend auf Bedingungen selektiv herauszufiltern. Fügen wir dem vorherigen Beispiel einen Filter hinzu, um nur gerade Zahlen auszugeben -

示例

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 通过提供一致且可组合的方法简化了复杂异步流的管理。

Das obige ist der detaillierte Inhalt vonReaktive Programmierung mit JavaScript und RxJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!