RxJS 筆記 - Subscription Lifecycle

在 RxJS 中，每個 Subscription 都有完整的生命週期。下圖清楚顯示了整個過程：

流程解析

Observable 在還沒被訂閱前，其實什麼都不會做，它只是儲存一段邏輯。這段邏輯可能很簡單，例如發送幾個固定值後結束；也可能相當複雜，例如從伺服器取得資料。

當我們呼叫 .subscribe() 時，Observable 內的程式碼開始執行，並建立一個新的 Subscription。此時 Observable 可能會依序發送：

1. next：傳遞資料給 Observer。
2. error：發生錯誤並通知 Observer。
3. complete：完成資料傳遞並通知 Observer。

一般情況下，next 最常見，每當有新值時就會觸發對應的處理函式。然而若遇到 error 或 complete，Subscription 就會結束。這時 Observable 會進入 Teardown 階段，負責釋放資源或中止操作。

此外，若 Observable 永遠不會結束（例如計時器），我們也可以手動呼叫 .unsubscribe() 來中止。

因此，結束訂閱的三種方式 為：

• 手動：unsubscribe()
• 自動：error
• 自動：complete

無論哪種方式，若有定義 Teardown，都會在結束時執行。

TeardownLogic

TeardownLogic 是一段「清理程式碼」，當 Subscription 結束時自動執行。常見用途包括：

• 釋放記憶體資源，避免 memory leak。
• 取消未完成的 HTTP 請求。
• 清除計時器或關閉伺服器連線。

範例如下：

當 Observable 發送 complete，Subscription 結束後，Teardown 會自動執行，幫助我們做後續清理。

範例：缺少 Teardown 的狀況

雖然已經 unsubscribe()，但背景的 setInterval 仍在執行，因為我們沒有清理。

加入 Teardown 的解法

這樣一來，在取消訂閱後計時器就會被正確清除，避免持續執行。

總結

• 結束訂閱：可以手動 (unsubscribe) 或自動 (error / complete)。
• Teardown 的目的：避免記憶體洩漏，清理資源，或中止操作。
• 執行時機：只要 Subscription 結束，若有 Teardown，必定會執行。

參考資料

• RxJs
• RxJs In Practice
• RxJS 7 and Observables: Introduction