EnriqueMark
Angular

Observable的pipe

2026-04 繁體中文

這就像一個中間截流管,可以説是Observable的中介軟體。裡面預定義了一些RxJS的處理方法,可以讓我們對返回的結果進行截留,然後按我的要求進行一個預處理。而這裡就和字面意思一樣,資訊流可以理解為水,pipe就是插在中間的過濾器,走一遭出來,得到處置過的水,整個流都要經過他。

資訊流在這裡的處置被抽象化為了一節一節:A流進入,處置,離開;B流進入,處置,離開。官方用彈珠圖 (Marble Diagrams)表達的正是這個概念。整個處置過程看起來很像是陣列,單獨對每個元素(流切片)進行處置,處置完了放行。所以map這個概念就很好理解了:map(i => i + 1),這裡的map絕對不是在處理一個陣列,而正是在處理流切片,i指的也是其中一個切片,而不是陣列元素。理解了這點,就會知道很多看上去好像是在操作list的方法(比如還有filter)其實早就不是原版那個了,pipe真正的操作物件一直是Observable,也只有它可以作為流被處理。

陣列處理的是空間上的多個元素,而管道中處理的是時間上的連續多個元素——抽象的意義上兩者沒什麼差別。而pipe的定義時機是在資料到來之前,subscribe代表通水的話,在此之前,過濾器就要先就位。

而從水和管道的角度來理解的話,Cold Observable 和 Hot Observable 這個概念就會好懂很多。前者代表是單次給水,誰subscribe我就給誰通一次水,每次都要從觸發源頭的抽水操作,結束後就關閉。但後者就不一樣了,它代表的是一個啟動一次就時刻運作的持續給水,任何人都可以從其中取水,而不再需要每次都通知源頭重複進行抽水操作。放在IO上,這就是一次IO和重複IO的區別。如果有一千個人要取一個資料,前者會重複打一千次後端,但後者只需要一次,剩下的按需取得。後者其實就是標準的發布-訂閲邏輯,既然資料是單一的,而不是每次都要拿不同的,那麼只需要發布一次,後來者直接訂閲即可拿到結果,而不需要每次都去發請求。

除了map之外,pipe還有一百多個Operator,比較常用的可以見 RxJS 速查 ,完全背下來沒什麼意義,需要時再查詢即可。