RxJS 系列 – Join Operators

前言

前幾篇介紹過了 

Creation Operators

Filter Operators

Join Creation Operators

Error Handling Operators

Transformation Operators

這篇繼續介紹Join Operators

 

參考

Docs – Join Operators

 

concatAll, mergeAll, switchAll, exhaustAll

參考: RxJS 組合類型 Operators (1) - switchAll / concatAll / mergeAll / combineAll / startWith

請先學習 concatMap, mergeMap, switchMap, exhaustMap 哦

這裏只介紹 concatAll, 主要是講那個 All 的概念, 其餘的只是換成 merge ,swtich, exhaust 概念而已.

concat 的 Observables 是一開始就定義好, 知道數量的 (o1, o2, o3) 3 個 Observables

concat(o1, o2, o3)

concatMap

from([1, 2, 3]).pipe(concatMap(v => of(v)));

concatMap 是接收 value 返回 Observable, 它的數量是動態的, 可以一直增加. 每當原 source 發佈, concat 的 Observables 就多一個

concatAll 和 concatMap 類似, 只是它放在後面

from([1, 2, 3]).pipe(map(v => of(v), concatAll()));

concatMap 是返回 Observable

concatAll 則是接收 Observable (必須是 Observable). 上面的例子和 concatMap 的例子實現的效果是一樣的.

所以其實只是提供 Observable 的方式改變了. 它的目的主要是在管理, 因爲有時候 Observable 的提供時機不容易控制. 所以 RxJS 支持前後 2 鍾方式提供 Observable 就方便多了.

 

combineLatestAll

它這個 All 的概念和 concatAll 的 All 是一樣的. 就是提供 Observable 的方式換了

combineLatest([
  interval(1000).pipe(map(v => `a${v}`)),
  interval(2000).pipe(map(v => `b${v}`)),
]).subscribe(v => {
  console.log(v);
});

const s1 = new Subject<Observable<string>>();
s1.pipe(combineLatestAll()).subscribe(v => {
  console.log(v);
});

s1.next(interval(1000).pipe(map(v => `a${v}`)));
s1.next(interval(2000).pipe(map(v => `b${v}`)));
s1.complete(); // 要 complete 了 combineLatestAll 纔會接收哦

上面這 2 個效果是一樣的.

combineLatest 參數直接接收所有 Observables

combineLatestAll 是通過 subscribe source 獲取 Observables 然後調用 combineLatest. 但它也必須等到 source complete 了纔會調用 combineLatest 哦.

 

startWith

startWith 的功能是通過 pipe 插入一個初始值.

const obs = new Observable(subscruber => {
  // 沒有任何發佈
});
obs.pipe(startWith('default value')).subscribe(v => console.log(v)); // default value

subscribe 會立刻接收到 default value 即便 Observable init 內並沒有任何發佈.

上一篇有介紹過 pairwise

通過 startWith 我們可以補上一個 default value, 這樣就不會總是少一次接收了.

const obs = from([1, 2, 3, 4]);
obs.pipe(startWith(null), pairwise()).subscribe(v => console.log(v)); // [null, 1]..[1,2]..[2,3]..[3,4]

 

withLatestFrom

withLatestFrom 和 combineLatest 差不多. 只是發佈時機不同.

combineLatest 是當任何一個 Observable 發佈時就發佈所有值

withLatestFrom 則通過一個獨立的 notification source 來確定發佈時機.

const click$ = fromEvent(document, 'click');
const source$ = interval(1000);
const source2$ = interval(2000);
click$.pipe(withLatestFrom(source$, source2$)).subscribe(v => console.log(v));

withLatestFrom(source$, source2$) 和 combineLatest(o1, o2) 是一樣的調用手法

只是 withLatestFrom 發佈的時機變成了 click$ 發佈的時候. 每一次點擊就會接接收到所有 Observables 最新的值.

 

一句或總結

concatAll, mergeAll, switchAll, exhaustAll : concatMap 是通過返回 Observable 這個方式來提供 Observable 給 concat, concatAll 則是通過接收 Observable 來提供 Observable 給 concat. 所以只是提供 Observable 的方式不同.

combineLatestAll : 通過 subscribe source 獲取 Observables, source 必須 complete 哦

startWith : 通過 pipe 插入初始化 value

withLatestFrom : 通過 notification source 控制發佈時機