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

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

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

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

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

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

可管道運算子是可以連結在一起的運算子。 這些是純函式，它們將可觀察物件作為輸入並提供可觀察物件作為輸出。

虛擬碼如下：

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

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

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

# 2. 建立型 Operator

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

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

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

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

# 冷熱 Observable 的區別

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

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

看個例子：

```typescript
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 方法。

![](https://img-blog.csdnimg.cn/img_convert/3e3b92233d8911666f4d950af42be3df.png)

Observable 的建構函式很簡單，就把 create 傳入的函式，設定到 Observable 內部屬性 _subscribe 裡：
![](https://img-blog.csdnimg.cn/img_convert/92259b425f9dc91e2c80d5316b6189c7.png)

然後針對 Observable.create 返回的 Observable 例項，呼叫 subscribe 方法進行訂閱。

![](https://img-blog.csdnimg.cn/img_convert/de48c4ec9f89e60ced8acb1267504fce.png)

訂閱者的邏輯通過 subscribe 方法傳入，是一個函式：
![](https://img-blog.csdnimg.cn/img_convert/569c04e7efb6d85efb722e18ebc50727.png)

toSubscriber 方法會建立一個訂閱者 subscriber 例項：
![](https://img-blog.csdnimg.cn/img_convert/39009dbc849b45551b4f30f84566a688.png)

![](https://img-blog.csdnimg.cn/img_convert/cca9d4fc351445983b03446a1fc9b45a.png)

subscriber 的建構函式裡，就是簡單的為 destination 欄位賦值：
![](https://img-blog.csdnimg.cn/img_convert/83f9fa75b5a2980c5734b08fc75daf03.png)

這裡把 subscribe 函式傳入的應用邏輯，賦給 safeSubscriber 的 _next 屬性：
![](https://img-blog.csdnimg.cn/img_convert/343c3af9d332f2c8bd79695ac781ef9e.png)

然後執行 _subscribe 方法：
![](https://img-blog.csdnimg.cn/img_convert/94c97cb7d97bdf5de93e7dff133bca38.png)

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

注意，subscribe 函式呼叫，首先會觸發 Observable 的 emit value：
![](https://img-blog.csdnimg.cn/img_convert/d02542afd2fb69294ecab1a78ce37bbc.png)

![](https://img-blog.csdnimg.cn/img_convert/b83b6a80d97feb420f44a6f23eb98868.png)

this._next 觸發 destination.next:

![](https://img-blog.csdnimg.cn/img_convert/08f86349cbb48f742f67641567e796f6.png)

![](https://img-blog.csdnimg.cn/img_convert/0dee99d8c307fa0e5e66ca280a6567f8.png)

這裡呼叫 SafeSubscriber 的 _next 屬性指向的方法，即 subscribe 傳入的函式實現：

![](https://img-blog.csdnimg.cn/img_convert/a44a9fbb22a463294f334c48759fcd18.png)

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

這段程式碼執行的先後順序如下：
![](https://img-blog.csdnimg.cn/img_convert/2adafeff10157eabf1bce13ebe131f7f.png)

rxjs Observable 兩大類操作符簡介

相關文章