rxjs合并数据流操作符

一、concat首尾相连

工作方式：

当第一个Observable对象complete之后，concat就会去subscribe第二个Observable对象获取数据，把同样的数据传给下游。

直到最后一个Observable完结之后，concat产生的Observable也就完结了。

import { of,concat } from 'rxjs';
...  
  const source1$ = of(1,2,3)
  const source2$ = of(4,5,6)

  const source$ = concat(source1$,source2$)

  source$.subscribe(
    console.log,
    null,
    ()=>console.log('complete')
  )
...

输出结果

 

 二、merge：先到先得快速通过

工作方式：

第一个Observable对象不完结，并不影响下游的observable对象，随先得到，就先输出。

当所有的Observable对象完结了，merge才会完结自己的Observable对象。

import { timer, merge } from 'rxjs';
import 'rxjs/add/operator/map'

...
  // 从第0毫秒开始，每隔1000毫秒产生一个数据，依次是：0A、1A、2A....
  const source1$ =  timer(0,1000).map( x=> x + 'A')　// 从第500毫秒开始，每隔1000毫秒产生一个数据，依次是：0B、1B、2B...
  const source2$ = timer(500,1000).map( x=> x+'B')

  const source$ = merge(source1$,source2$)

  source$.subscribe(
    console.log,
    null,
    ()=>console.log('complete')
  )
...

输出结果前几个数值如下：

 

 同步限流

merge有一个可选参数，放在最后。表示指定可以同时合并的observable对象个数。

如果前面两个observable对象没有完结，第三个Observable对象永远不会进入source$。

const source1$ =  timer(0,1000).map( x=> x + 'A')
  const source2$ = timer(500,1000).map( x=> x+'B')
  const source3$ = timer(1000,1000).map( x=> x+'C')

  const source$ = merge(source1$,source2$,source3$,2)

merge的应用场景

fromEvent可以从网页中获取事件，但是fromEVent一次只能从一个DOM元素获取一种类型的事件。

如果某个元素的click事件，也同时需要touchend事件，因为移动设备上touchend事件出现得比click更早。

这两个事件的处理是一模一样的。

此时需要借助merge的力量。

const source1$ =  fromEvent(document.querySelector('#text'),'click')
const source2$ = fromEvent(document.querySelector('#text'),'touchend')

const source$ = merge(source1$,source2$)

结论：

merge只对产生异步数据的Observable才有意义。

 三、zip：拉链式组合

工作方式：

一对一合并，如果source1$吐出数据更快，也会等着source2$数据吐出后一对一配对输出。

即使source1$还有多余的数据，如果没有配对数据，将会执行complete完结。

因此会造成数据挤压问题。

zip也可以多个数据流合并。

  import { of, zip } from 'rxjs';

const source1$ =  of(1,2,3,4,5)
const source2$ = of('a','b','c')
const source$ = zip(source1$,source2$)

输出结果：

 

来源：https://www.cnblogs.com/hibiscus-ben/p/12408020.html