JavaScript中rxjs與Observable操作符怎么使用

這篇文章主要講解了“JavaScript中rxjs與Observable操作符怎么使用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JavaScript中rxjs與Observable操作符怎么使用”吧！

前言

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

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

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

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

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

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

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

偽代碼如下：

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

operator1 將接收 observable，對其執(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 是一個 Observable 類型的實(shí)例，它將發(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 方法進(jìn)行發(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 實(shí)例，調(diào)用 subscribe 方法進(jìn)行訂閱。

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

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

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ù)實(shí)現(xiàn)：

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

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

感謝各位的閱讀，以上就是“JavaScript中rxjs與Observable操作符怎么使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對JavaScript中rxjs與Observable操作符怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！