RxJS操作符之switchAll, mergeAll, concatAll间的区别

1,999 阅读2分钟

前言

switchAll, concatAll, mergeAll都是将高阶可观察值转换为一阶可观察值的操作符,可理解为扁平化,像二维数组转成一维数组

什么是高阶可观察对象?可观察对象的可观测对象被称为“高阶可观察对象”(Observable<Observable<T>>)

事例

import { fromEvent, interval } from 'rxjs'
import { map, take, switchAll, delay, concatAll, mergeAll } from 'rxjs/operators';

const example = fromEvent(document, 'click')
// 连续点击两下
example.pipe(
  map(e => interval(1000).pipe(delay(3000), take(3))), 
  concatAll(),
  map(a => 'concat' + a)
  )
  .subscribe((value) => { console.log(value); });
/*
  concat0
  concat1
  concat2
  concat0
  concat1
  concat2
  */
example.pipe(
  map(e => interval(1000).pipe(delay(3000), take(3))), 
  mergeAll(),
  map(a => 'merge' + a)
  )
  .subscribe((value) => { console.log(value); });
/*
  merge0
  merge0
  merge1
  merge1
  merge2
  merge2
  */
example.pipe(
  map(e => interval(1000).pipe(delay(3000), take(3))), 
  switchAll(),
  map(a => 'switch' + a)
  )
  .subscribe((value) => { console.log(value); });

/*
  switch0
  switch1
  switch2
 */

不同之处

concatAll

处理完前一个Observable才会再处理下一个Observable。依次按顺序执行一个个observable。如上面4秒后拿concat0,第5秒concat1,第6秒concat2;第10秒后concat0,第11秒concat1,第12秒concat2

mergeAll

能够同时并行处理所有的Observable,如上会根据两次点后各个Observable输出时间依次输出对应数据,像是几个接口请求一样,不管你是何是发出的,只管谁最先请求到数据,谁就先输出对应该数据,就这样依次输出直最后一个请求成功输出最后数据

switchAll

新的Observable输出后直接处理新的observable,不管前一个Observable是否完成,只要有新的Observable送出就会直接把旧的Observable退订(unsubscribe),永远只处理最新的Observable。如上面连点两次,第一次点击Observable要4秒后才输出出来,此时第二次点击早就有了新的Observable,所有会取消第一次订阅,只4秒后输出第二点击的数据

在线代码示例

文中如有错误,欢迎在评论区指正,如果这篇文章帮助到了你,欢迎点赞和关注

本文使用 mdnice 排版