Observables在JavaScript編程中有什么用

小編給大家分享一下Observables在JavaScript編程中有什么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

安裝 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函數的結果分配給 發射器變量，這將創建一個從數字 1 到 4 的 Observable。我們現在可以創建一個 Observer，如下所示： 

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

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

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

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

請注意，只有在Observable上調用subscribe 函數時，Observable 才會開始發出值。調用該 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 函數從數組中創建一個 Observable。同樣，我們對名為emitArray 的 Observable 上調用subscribe函數 ，并為 Observable 發出的每個值提供一個要調用的函數。這段代碼的輸出如下： 

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

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

Pipe 和 Map 

RxJS 庫為所有的 Observable 提供了一個 pipe 函數， 類似 subscribe 函數。該 pipe函數將可變數量的函數作為參數，并將對 Observable 發出的每個值執行這些函數。提供給 pipe 函數的函數通常稱為 Observable 操作符，它們都接受一個 Observable 作為輸入，并返回一個 Observable 作為輸出。 pipe 函數發出一個 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 開始 ，它將發射值 1 到 4。然后我們定義一個名為modulus 的變量來保存對emitter Observable調用pipe 函數的結果 。我們為pipe 函數提供的的唯一參數是對map 函數的調用 ，它是 RxJS的運算符函數之一。 

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

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

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

在這里，我們可以看到 emitter Observable 發出 1 到 4 的值，并且 modules Observable正在為接收到的每個值發出的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 發出的值?？紤]以下代碼： 

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 ，它將發射值 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發出的每個值 。請注意 ，在我們的第二個 map 函數中，我們實際上已經將每個值的類型從 number 類型修改為 string 類型。 這就是為什么在我們的函數中為value 參數指定 subscribe的類型是 string 類型的原因。 

以上是“Observables在JavaScript編程中有什么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！