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

魔法博士

Rxjs中有三种操作符都是用作从主流转换到从流上的,它们分别是switchMapconcatMapflatMapexhaustMapRxViz可以将流进行可视化,我们就利用RxViz来一探这四种操作符的异同。

一、相同点

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

二、不同点

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

1. switchMap

  • 代码:
var mainstream = Rx.Observable.interval(500);
mainstream.switchMap((x) => Rx.Observable.interval(200).take(5));
  • 可视化演示:

clipboard.png

  • 分析:

从结果可以看到,用switchMap的时候,从流每次只能发射2个数据0-1,这是因为主流每发射一次触发了从流的发射,但是在从流发射的过程中,如果主流又一次发射了数据,switchMap会截断上一次的从流,响应本次的主流,从而开启新的一段的从流发射。

2. concatMap

  • 代码:
var mainstream= Rx.Observable.interval(500);
mainstream.concatMap((x) => Rx.Observable.interval(200).take(5));
  • 可视化演示:

clipboard.png

  • 分析:

从结果可以看到,用concatMap的时候,虽然在从流还没有结束的时候,主流还在发射数据,主流会先把发射的数据缓存起来,等从流结束后立即响应主流的数据从而引发新一轮的从流发射,这有些类似与js的消息队列机制。所以我们看到它的输出流响应是连续的。

3. flatMap / mergeMap

代码:

var mainstream= Rx.Observable.interval(500);
mainstream.flatMap((x) => Rx.Observable.interval(200).take(5));
  • 可视化演示:

clipboard.png

分析:
从结果可以看出来,flatMap/mergeMap会即使响应主流中发射的每一个数据,它既不会忽略也不会缓存,这就导致主流中数据对应的从流产生了叠加。

4. exhaustMap

  • 代码:
var mainstream= Rx.Observable.interval(500);
mainstream.exhaustMap((x) => Rx.Observable.interval(200).take(5));
  • 可视化演示:

clipboard.png

  • 分析:

从结果可以看出,exhaustMap在从流还没有结束的时候如果主流仍然有数据在发射,它会忽略此时主流发射的数据,而在从流结束以后才会去响应主流中发射的数据。

阅读 16k

前端攻城狮一枚

220 声望
11 粉丝
0 条评论
你知道吗?

前端攻城狮一枚

220 声望
11 粉丝
文章目录
宣传栏