RxJS

Basic

Marble Diagrams

Oprerators

take, first, takeUntil, concatAll

• take: 取前 N 個元素就結束
• first: 同 take(1)
• takeUntil: 在某件事發生時結束
• concatAll: 把所有元素 concat 在一起，按照 observable 的順序

skip, takeLast, last, concat, startWith, merge

• skip: 略過前 N 個元素
• takeLast: 取最後 N 個元素
• last: 同 takeLast(1)
• concat: 把多個 observable 合併成一個，按照 observable 的順序
• startWith: 在 observable 的一開始塞要發送的元素
• merge: 跟 concat 一樣都是用來合併 observable，按照時間的順序

combineLatest, withLatestFrom, zip

scan, buffer

delay, delayWhen

• delay: 延遲 observable 一開始發送元素的時間點
• delayWhen: 跟 delay 很像，最大的差別是 delayWhen 可以影響每個元素，而且需要傳一個 callback 並回傳一個 observable

throttle, debounce --- 降低事件的觸發頻率

• throttle
  • 會先開放送出元素，等到有元素被送出就會沈默一段時間，等到時間過了又會開放發送元素
  • 比較像是控制行為的最高頻率，也就是說如果我們設定 1000 毫秒，那該事件頻率的最大值就是每秒觸發一次不會再更快
• debounce
  • 每次收到元素，他會先把元素 cache 住並等待一段時間，如果這段時間內已經沒有收到任何元素，則把元素送出
  • 如果這段時間內又收到新的元素，則會把原本 cache 住的元素釋放掉並重新計時，不斷反覆
  • 比較像是必須等待的時間，要等到一定的時間過了才會收到元素。
• throttleTime, debounceTime
  • input: ms

distinct, distinctUntilChanged

catch, retry, retryWhen, repeat

switch, mergeAll, concatAll (皆可把 二維轉成一維)

• switch: 永遠只處理最新的 observable!
• mergeAll: 跟 concatAll 一樣都是用來合併 observable，按照時間的順序
• concatAll: 把所有元素 concat 在一起，按照 observable 的順序

switchMap, mergeMap, concatMap

• switchMap: map + switch source.map().switch() ---> source.switchMap()
• mergeMap: map + mergeAll source.map().mergeAll() ---> source.mergeMap()
• concatMap: map + concatAll source.map().concatAll() ---> source.concatMap()

window, windowToggle

Subject

Subject

BehaviorSubject

ReplaySubject

operators: multicast, refCount, publish, share

Scheduler

Comparison

• switchMap, mergeMap, concatMap
  • concatMap 用在可以確定內部的 observable 結束時間比外部 observable 發送時間來快的情境，並且不希望有任何並行處理行為，適合少數要一次一次完成到底的的 UI 動畫或特別的 HTTP request 行為。
  • switchMap 用在只要最後一次行為的結果，適合絕大多數的使用情境。
  • mergeMap 用在並行處理多個 observable，適合需要並行處理的行為，像是多個 I/O 的並行處理。

Reference

• 30 天精通 RxJS