用可视化来理解switchMap, concatMap, flatMap,exhaustMap

891 阅读2分钟

用可视化来理解switchMap, concatMap, flatMap,exhaustMap

相同点

总体上来说,四个操作符的作用都是:存在一个主流和一个从流,主流上每发射一次数据都会触发从流开始发射数据,最后数据都被打平到同一个输出流中,如下图所示。

不同点

以下四个例子,主流是每500毫秒发射一次数据,从流是每200毫秒发射数据,每次主流发射数据都会触发从流。

  1. switchMap
  • 代码
var mainstream = Rx.Observable.interval(500);
mainstream.switchMap((x) => Rx.Observable.interval(200).take(5));
  • 可视化演示
  • 分析 从结果可以看到,用switchMap的时候,从流每次只能发射2个数据0-1,这是因为主流每发射一次触发了从流的发射,但是在从流发射的过程中,如果主流又一次发射了数据,switchMap会截断上一次的从流,响应本次的主流,从而开启新的一段的从流发射。
  1. concatMap
  • 代码
var mainstream= Rx.Observable.interval(500);
mainstream.concatMap((x) => Rx.Observable.interval(200).take(5));
  • 可视化演示
  • 分析 从结果可以看到,用concatMap的时候,虽然在从流还没有结束的时候,主流还在发射数据,主流会先把发射的数据缓存起来,等从流结束后立即响应主流的数据从而引发新一轮的从流发射,这有些类似与js的消息队列机制。所以我们看到它的输出流响应是连续的。
  1. flatMap / mergeMap
  • 代码
var mainstream= Rx.Observable.interval(500);
mainstream.flatMap((x) => Rx.Observable.interval(200).take(5));
  • 可视化演示
  • 分析 从结果可以看出来,flatMap/mergeMap会即使响应主流中发射的每一个数据,它既不会忽略也不会缓存,这就导致主流中数据对应的从流产生了叠加。
  1. exhaustMap
  • 代码
var mainstream= Rx.Observable.interval(500);
mainstream.exhaustMap((x) => Rx.Observable.interval(200).take(5));
  • 可视化演示
  • 分析 从结果可以看出,exhaustMap在从流还没有结束的时候如果主流仍然有数据在发射,它会忽略此时主流发射的数据,而在从流结束以后才会去响应主流中发射的数据。

-- 摘自 segmentfault.com/a/119000001…