RxJS 系列 – Join Operators

前言

前几篇介绍过了

Creation Operators

Filtering 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 控制发布时机