RxJS 系列 – Join Operators
前言
前几篇介绍过了
这篇继续介绍 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 控制发布时机