前言

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

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

鏈中的算子不會(huì)同時(shí)工作，而是按順序運(yùn)行，每個(gè)算子都在鏈中前一個(gè)算子生成的 Observable 上工作。

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

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

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

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

偽代碼如下：

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

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

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

2. 創(chuàng)建型 Operator

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

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

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

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

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

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

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

看個(gè)例子：

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

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

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

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

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

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

toSubscriber 方法會(huì)創(chuàng)建一個(gè)訂閱者 subscriber 實(shí)例： 

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

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

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

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

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

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

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

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

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

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

最新評(píng)論