理解 Observables 在 JavaScript 編程中的重要性

The emitter Observable and the modulus Observable could be explicitly typed as follows: ?Reactive Extensions for JavaScript ?庫是專門用于事件處理的最強大和流行的 JavaScript 庫之一 ，或簡稱為 ?RxJS ?。 ?RxJS ?使用名為? Observable? 模式的四人組 ( GoF ) 設計模式作為注冊事件興趣的基礎，以及在事件觸發(fā)時執(zhí)行某些操作。 下面，我們就一起來探索 ?RxJS ?庫的基礎知識以及它提供的 ?Observables? 的基本概念。

安裝 RxJS 庫

要開始討論 Observables， 我們首先安裝 RxJS 庫，如下所示： 

npm install rxjs 

 RxJS 庫已經包括由 Typescript 所需的申報文件，所以沒有必要單獨使用?@types?安裝它們。 

要生成一個 Observable，我們可以使用 ?of?， 如下函數： 

import { of, Observable } from "rxjs";  

const emitter : Observable<number> = of(1, 2, 3, 4); 

在這里，我們首先從?rxjs?庫中導入 ?of ?函數和 ?Observable?類型 。然后我們定義一個名為?emitter?的常量變量 ，它使用通用語法將其類型定義為類型?number?的 ?Observable  ?。然后我們將?of?函數的結果分配給 發(fā)射器變量，這將創(chuàng)建一個從數字 1 到 4 的 ?Observable?。我們現在可以創(chuàng)建一個 ?Observer?，如下所示： 

emitter.subscribe((value: number) => { 
    console.log(`value: ${value}`) 
}); 

在這里，我們調用變量?emitter?上的?subscribe?函數。由于 ?emitter? 變量是 ?Observable ?類型，它會自動公開 ?subscribe ?函數以注冊?Observers?。subscribe 函數將一個函數作為參數，該函數將為 Observable 發(fā)出的每個值調用一次。這段代碼的輸出如下： 

value: 1 
value: 2 
value: 3 
value: 4 

在這里，我們可以看到我們傳遞給 subscribe 函數的函數確實為 Observable 發(fā)出的每個值調用了一次。 

請注意，只有在?Observable?上調用?subscribe ?函數時，?Observable ?才會開始發(fā)出值。調用該 ?subscribe ?函數稱為訂閱 ?Observable?，而 ?Observable ?產生的值也稱為 ?Observable ?流。 

?of? 函數有一個名為 ?from?的伙伴函數，它使用一個數組作為 ?Observable ?的輸入，如下所示： 

const emitArray : Observable<number> = from([1, 2, 3, 4]); 
 
emitArray.subscribe((value: number) => { 
    console.log(`arr: ${value}`); 
}); 

在這里，我們有一個名為?emitArray?的變量 ，它的類型是 ?Observable<number>?，并且正在使用該 ?from ?函數從數組中創(chuàng)建一個 ?Observable?。同樣，我們對名為?emitArray? 的 ?Observable ?上調用?subscribe?函數 ，并為 ?Observable ?發(fā)出的每個值提供一個要調用的函數。這段代碼的輸出如下： 

arr: 1 
arr: 2 
arr: 3 
arr: 4 

在這里，我們可以看到 ?from ?函數已經從數組輸入創(chuàng)建了一個 ?Observable ?流，并且我們提供給 ?subscribe ?函數的函數正在為?Observable ?發(fā)出的每個值都調用一次。 

Pipe 和 Map 

RxJS 庫為所有的 ?Observable ?提供了一個 ?pipe ?函數， 類似 ?subscribe ?函數。該 ?pipe函數將可變數量的函數作為參數，并將對 ?Observable ?發(fā)出的每個值執(zhí)行這些函數。提供給 ?pipe ?函數的函數通常稱為 ?Observable ?操作符，它們都接受一個 ?Observable ?作為輸入，并返回一個 ?Observable ?作為輸出。 ?pipe ?函數發(fā)出一個 ?Observable ?流。 

這個概念最好通過閱讀一些代碼來解釋，如下例所示： 

import { map } from "rxjs/operators"; 
const emitter = of(1, 2, 3, 4); 
 
const modulus = emitter.pipe( 
    map((value: number) => { 
        console.log(`received : ${value}`); 
        return value % 2; 
    })); 
 
modulus.subscribe((value: number) => { 
    console.log(`modulus : ${value}`); 
}); 

在這里，我們從一個名為?emitter?的 ?Observable ?開始 ，它將發(fā)射值 1 到 4。然后我們定義一個名為?modulus ?的變量來保存對?emitter ???Observable??調用?pipe ?函數的結果 。我們?yōu)?pipe ?函數提供的的唯一參數是對?map ?函數的調用 ，它是 RxJS的運算符函數之一。 

?map ?函數將單個函數作為參數，并將為 ?Observable ?發(fā)出的每個值調用此函數。該 ?map ?函數用于將一個值映射到另一個值，或以某種方式修改發(fā)出的值。在此示例中，我們返回將 2 的模數應用于每個值的結果。 

最后，我們訂閱 ?Observable ?并將其值記錄到控制臺。這段代碼的輸出如下： 

received : 1 
modulus : 1 
received : 2 
modulus : 0 
received : 3 
modulus : 1 
received : 4 
modulus : 0 

在這里，我們可以看到 ?emitter Observable? 發(fā)出 1 到 4 的值，并且 ??modules Observable??正在為接收到的每個值發(fā)出的?Modules ?2。  

請注意，在這些代碼示例中，我們沒有明確設置 ?Observable ?的類型。 

?emitter Observable?和??modules Observable??可以顯式類型如下： 

const emitter : Observable<number> = of(1, 2, 3, 4); 
 
const modulus : Observable<number> = emitter.pipe(  
    ... 
); 

在這里，我們指定了 ?emitter Observable? 和??modules Observable ??的類型。這不是絕對必要的，因為 TypeScript 編譯器會在使用 ?Observables ?時確定正確的返回類型。然而，它確實明確說明了我們對 ?Observable ?流的期望，并且在更大或更復雜的 ?Observable ?轉換中，明確設置預期的返回類型使代碼更具可讀性并可以防止錯誤。 

組合運算符 

 ?pipe ?函數允許我們組合多個運算符函數，每個函數都將應用于 ?Observable ?發(fā)出的值?？紤]以下代碼： 

const emitter = of(1, 2, 3, 4); 
 
const stringMap = emitter.pipe( 
    map((value: number) => { return value * 2 }), 
    map((value: number) => { return `str_${value}` }) 
); 
 
stringMap.subscribe((value: string) => { 
    console.log(`stringMap emitted : ${value}`); 
}); 

在這里，我們有一個?Observable?的命名 ?emitter? ，它將發(fā)射值 1 到 4。然后我們有一個名為?stringMap?的變量  ，用于保存 ?emitter Observable?的?pipe ?函數的結果 。在這個 ?pipe ?函數中，我們有兩個 ?map ?函數。第一個 ?map ?函數將傳入的數值乘以 2，第二個 ?map ?函數將其轉換為帶有前綴的字符串 str_。 

然后我們訂閱 Observable 并將每個值記錄到控制臺。這段代碼的輸出如下： 

stringMap emitted : str_2 
stringMap emitted : str_4 
stringMap emitted : str_6 
stringMap emitted : str_8 

在這里，我們可以看到兩個 ?map ?函數都應用于?emitter Observable?發(fā)出的每個值 。請注意 ，在我們的第二個 ?map ?函數中，我們實際上已經將每個值的類型從 ?number ?類型修改為 ?string ?類型。 這就是為什么在我們的函數中為?value ?參數指定 ?subscribe?的類型是 ?string? 類型的原因。 

概括 

在本篇文章中，我們已經探討了基本的RxJS 庫，它提供了可觀測量的基本概念。我們已經看到了如何使用 of 和 from 函數輕松創(chuàng)建 Observable  。