使用 JavaScript 和 RxJS 進行響應式編程-js教程-PHP中文網

使用 JavaScript 和 RxJS 進行響應式編程

PHPz

發布： 2023-09-09 18:37:02

轉載

1026 人瀏覽過

使用 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 方法並提供回呼函數。在這種情況下，回呼函數只是將發出的數字記錄到控制台。

輸出

登入後複製

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，并使用订阅者的回调函数将每个发出的数字记录到控制台。