前言

Observable 生產(chǎn)的數(shù)據(jù)，應(yīng)該提供開發(fā)人員足夠的自由度，對這些數(shù)據(jù)進行各種處理，比如 map / transform 等等。這就是 Rxjs Operator 大展身手的地方。

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

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

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

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

1. 可以加入到 pipe 鏈?zhǔn)讲僮鞯?Operator

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

偽代碼如下：

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

operator1 將接收 observable，對其執(zhí)行操作并發(fā)出 observable。 從 operator1 發(fā)出的 observable 被傳遞給 operator2 作為輸入（通過其余的運算符以此類推）。

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

2. 創(chuàng)建型 Operator

創(chuàng)建操作符是創(chuàng)建新 Observable 的獨立函數(shù)。最典型的創(chuàng)建操作符就是 of:

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

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

create, of 和 from 是創(chuàng)建型操作符的典型例子。

3. 冷熱 Observable 的區(qū)別

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

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

看個例子：

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

這個 Observable 發(fā)射的值就是 Hello World. 它會調(diào)用訂閱者的 next 方法進行發(fā)射。

Observable.create 的輸入?yún)?shù)是一個訂閱者 subscriber. 這是一個函數(shù)，函數(shù)的輸入?yún)?shù)是 Observer，類型為 any. 函數(shù)體為執(zhí)行該輸入?yún)?shù)的 next 方法。

Observable 的構(gòu)造函數(shù)很簡單，就把 create 傳入的函數(shù)，設(shè)置到 Observable 內(nèi)部屬性 _subscribe 里： 

然后針對 Observable.create 返回的 Observable 實例，調(diào)用 subscribe 方法進行訂閱。

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

toSubscriber 方法會創(chuàng)建一個訂閱者 subscriber 實例： 

subscriber 的構(gòu)造函數(shù)里，就是簡單的為 destination 字段賦值：

這里把 subscribe 函數(shù)傳入的應(yīng)用邏輯，賦給 safeSubscriber 的 _next 屬性： 

然后執(zhí)行 _subscribe 方法： 

這個 _subscribe 方法就是 subscribe 函數(shù)調(diào)用第一步，把 subscribe 傳入的應(yīng)用邏輯賦給 _subscribe 屬性的那個函數(shù)。

注意，subscribe 函數(shù)調(diào)用，首先會觸發(fā) Observable 的 emit value： 

this._next 觸發(fā) destination.next:

這里調(diào)用 SafeSubscriber 的 _next 屬性指向的方法，即 subscribe 傳入的函數(shù)實現(xiàn)：

總結(jié)一下，Observable.create 和 Observable.subscribe 這套調(diào)用, 首先會觸發(fā) Observable 實例調(diào)用 next 方法，發(fā)射調(diào)用創(chuàng)建操作符時指定的待發(fā)射值。接著會觸發(fā)應(yīng)用開發(fā)人員傳入 subscribe 調(diào)用的業(yè)務(wù)邏輯，消費這個發(fā)射的值。

這段代碼執(zhí)行的先后順序如下： 

到此這篇關(guān)于JavaScript中rxjs與 Observable 兩大類操作符解析的文章就介紹到這了,更多相關(guān)JS rxjs與 Observable 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論