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元素获取一种类型的事件。

扫描二维码关注公众号，回复： 9570672 查看本文章

如果某个元素的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才有意义。