JavaScript中rxjs與 Observable 兩大類操作符解析

Posted on by

前言

Observable 生產的數據，應該提供開發人員足夠的自由度，對這些數據進行各種處理，比如 map / transform 等等。這就是 Rxjs Operator 大展身手的地方。

運算符是對 Observable 進行操作並返回 Observable 的函數。 這允許我們鏈接這些運算符。 鏈中的每個運算符都會修改由前一個運算符的運算產生的 Observable。

鏈中的算子不會同時工作，而是按順序運行，每個算子都在鏈中前一個算子生成的 Observable 上工作。

訂閱是使用 subscribe 運算符完成的。 訂閱操作符允許觀察者連接 Observable。 觀察者要從 Observable 獲取數據或錯誤，首先必須訂閱該 Observable。

Rxjs 裡的 Operator 可以分為兩大類。

1. 可以加入到 pipe 鏈式操作的 Operator

可管道運算符是可以鏈接在一起的運算符。 這些是純函數，它們將可觀察對象作為輸入並提供可觀察對象作為輸出。

偽代碼如下：

observeable.pipe(
  operator1(),
  operator2(),
  operator3(),
  operator3(),
)

operator1 將接收 observable，對其執行操作並發出 observable。 從 operator1 發出的 observable 被傳遞給 operator2 作為輸入（通過其餘的運算符以此類推）。

filter、mergeMap 和 forkJoin 是可管道操作符的一些示例。

2. 創建型 Operator

創建操作符是創建新 Observable 的獨立函數。最典型的創建操作符就是 of:

import { of } from 'rxjs';
const observable = of(1, 2, 3);

變量 observable 是一個 Observable 類型的實例，它將發出 1、2 和 3（按順序）。

create, of 和 from 是創建型操作符的典型例子。

3. 冷熱 Observable 的區別

Code Observable 在觀察者訂閱它之前不會開始發出值。

相反的，Hot Observable 可以隨時開始發出值，訂閱者可以隨時開始觀察發出的值。 但是，訂閱者可能會錯過訂閱時間之前發出的任何值。

看個例子：

import { Observable } from 'rxjs';
const observable = Observable.create((observer: any) => {
  observer.next('Hello World!');
});
observable.subscribe((message) => console.log(message)); // Hello World!

這個 Observable 發射的值就是 Hello World. 它會調用訂閱者的 next 方法進行發射。

Observable.create 的輸入參數是一個訂閱者 subscriber. 這是一個函數，函數的輸入參數是 Observer，類型為 any. 函數體為執行該輸入參數的 next 方法。

Observable 的構造函數很簡單，就把 create 傳入的函數，設置到 Observable 內部屬性 _subscribe 裡： 

然後針對 Observable.create 返回的 Observable 實例，調用 subscribe 方法進行訂閱。

訂閱者的邏輯通過 subscribe 方法傳入，是一個函數： 

toSubscriber 方法會創建一個訂閱者 subscriber 實例： 

subscriber 的構造函數裡，就是簡單的為 destination 字段賦值：

這裡把 subscribe 函數傳入的應用邏輯，賦給 safeSubscriber 的 _next 屬性： 

然後執行 _subscribe 方法： 

這個 _subscribe 方法就是 subscribe 函數調用第一步，把 subscribe 傳入的應用邏輯賦給 _subscribe 屬性的那個函數。

註意，subscribe 函數調用，首先會觸發 Observable 的 emit value： 

this._next 觸發 destination.next:

這裡調用 SafeSubscriber 的 _next 屬性指向的方法，即 subscribe 傳入的函數實現：

總結一下，Observable.create 和 Observable.subscribe 這套調用, 首先會觸發 Observable 實例調用 next 方法，發射調用創建操作符時指定的待發射值。接著會觸發應用開發人員傳入 subscribe 調用的業務邏輯，消費這個發射的值。

這段代碼執行的先後順序如下： 

到此這篇關於JavaScript中rxjs與 Observable 兩大類操作符解析的文章就介紹到這瞭,更多相關JS rxjs與 Observable 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：