看這段最簡單的程式碼：

```typescript
import { Observable, of } from 'rxjs';

const observable = of(1, 2, 3);

observable.subscribe((message) => {
  console.log(message);
});

```

輸出：

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

輸入的 1，2，3 被當成陣列處理，觸發 fromArray 函式呼叫：
![](https://img-blog.csdnimg.cn/img_convert/96afec6c747e2d20d91649bf66f0b14f.png)

因為不存在 scheduler 呼叫，所以進入 subscribeToArray 分支：

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

subscribeToArray 的實現在一個 `subscribeToArray.ts` 檔案裡，這個檔案的名稱空間如下：internal/util

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

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

注意，上圖第 8 行的 for 迴圈，顯然在 of 函式呼叫裡不會執行，而是 of 返回的 Observable 被 subscribe 時才執行。subscribeToArray 的邏輯就是，一個簡單的 for 迴圈，迴圈體內依次呼叫 subscriber 的 next 方法，最後呼叫 complete 方法。

subscribeToArray 返回的函式，儲存在 Observable 建構函式的 _subscribe 屬性內。
![](https://img-blog.csdnimg.cn/img_convert/7ec73269ab23ebc81f0825bd1aa02530.png)

然後針對這個 of 返回的 Observable 例項，呼叫 subscribe 方法。

of Observable 例項的 _subscribe 方法，指向的就是剛剛 subscribeToArray 返回的函式：

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

直到 Observable 被 subscribe，這個函式體才得以執行。在函式體的 for 迴圈內，逐一呼叫 subscriber 的 next 方法：

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

subscriber 並不是應用開發人員建立的，而是 rxjs 框架內部維護和使用的。subscriber 有一個屬性 destination，指向 Safesubscriber，這個 safesubscriber 的 _next 屬性，指向的就是應用開發人員維護的回撥函式。

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

這段函式先後執行順序如下圖圖例所示：

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

subscribe 除了傳入一個單一的回撥函式之後，還支援 error 和 complete 處理。

看下面的例子：

```typescript
import { Observable, of } from 'rxjs';

const observable = of(1, 2, 3);

observable.subscribe(
  (message) => {
    console.log(message);
  },
  () => {},
  () => {
    console.log('complete');
  }
);

```

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

complete 方法和 next 方法的執行邏輯類似，唯一區別是在 for 迴圈體執行完畢之後觸發：
![](https://img-blog.csdnimg.cn/img_convert/e410820724626db8151bf23e603c07d0.png)

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

由此可見，of 建立的 Observable 是 cold Observable.
如果是一個週期性發射資料的 Observable，我們還可以使用 unsubscribe 對其取消訂閱。看下面的程式碼：

```typescript
import { interval } from 'rxjs';

const observable = interval(1000);
const subscription = observable.subscribe((x) => console.log(x));
setTimeout(() => {
  subscription.unsubscribe();
}, 4500);

```

輸出：
![](https://img-blog.csdnimg.cn/img_convert/8fd6619983e8513acc8b1b3721f3b156.png)

該 Observable 在輸出 4 個整數後停止發射值。

rxjs Observable of 操作符的單步除錯分析

相關文章