RxJS mergeMap,switchMap,concatMap合并多个Observable, 不会取消之前的流。当

本文基于RxJS v6进行学习RxJS操作符之mergeMap,switchMap,concatMap

mergeMap

合并多个Observable, 不会取消之前的流。

当main被订阅之后，source流每隔三秒进行触发一次，当触发的同时，内部的流也被触发，但source流每隔三秒触发后，之前没执行完的流并不会被中断。

// RxJS v6+
import { of, interval } from "rxjs";
import { mergeMap, take } from "rxjs/operators";

const source$ = interval(3000);
const main = source$
  .pipe(mergeMap(() => interval(500).pipe(take(10))))
  .subscribe(item => console.log(item));

switchMap

合并多个Observable, 会取消之前的流。

当main被订阅之后，source流每隔三秒进行触发一次，当触发的同时，内部的流也被触发，但source流每隔三秒触发后，会取消之前的流。

// RxJS v6+
import { of, interval } from "rxjs";
import { switchMap, take } from "rxjs/operators";

const source$ = interval(3000);
const main = source$
  .pipe(switchMap(() => interval(500).pipe(take(10))))
  .subscribe(item => console.log(item));

concatMap

以序列化的方式等待前一个流执行完毕后执行下一个流。

// RxJS v6+
import { of, interval } from "rxjs";
import { concatMap, mergeMap, take, delay } from "rxjs/operators";

const source$ = of(2000, 1000, 3000);
const concatMapExample = source$
  .pipe(concatMap(val => of(`Delayed by:${val}ms`).pipe(delay(val))))
  .subscribe(item => console.log(`With ConcatMap: ${item}`));

const mergeMapExample = source$
  .pipe(
    delay(8000),
    mergeMap(val => of(`Delayed by:${val}ms`).pipe(delay(val)))
  )
  .subscribe(item => console.log(`With MergeMap: ${item}`));