Rxjs合并数据流 | 易学教程

前言

在Rxjs的世界中，为了满足复杂的需求，往往需要把不同来源的数据汇聚在一起，把多个Observable对象的数据合并到一个 Observable对象中。

合并类操作符

concat
能够把多个Observable中的数据内容依次合并。

import 'rxjs/add/observable/of'; 
import 'rxjs/add/operator/concat'; 
const source1$ = Observable.of(1, 2, 3); 
const source2$ = Observable.of(4, 5, 6); 
const concated$ = source1$.concat(source2$);

Merge
merge会第一时间订阅所有的上游Observable，然后对上游的数据采取“先到先得”的策略，任何一个Observable只要有数据推下来，就立刻转给下游Observable对象。

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/timer'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/observable/merge'; 
const source1$ = Observable.timer(0, 1000).map(x => x+'A'); 
const source2$ = Observable.timer(500, 1000).map(x => x+'B'); 
const merged$= Observable.merge(source1$, source2$); 
merged$.subscribe( 
	console.log, 
	null, 
	() => console.log('complete') 
);

zip
一对一合并。

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/of'; 
import 'rxjs/add/observable/zip'; 
const source1$ = Observable.of(1, 2, 3); 
const source2$ = Observable.of('a', 'b', 'c'); 
const zipped$ = Observable.zip(source1$, source2$); 
zipped$.subscribe( 
	console.log, 
	null, 
	() => console.log('complete') 
);

zip又和concat、merge很不同， concat、merge会保留原有的数据传给下游，但是zip会把上游的数据转化为数组形式，每一个上游Observable贡献的数据会在对应数组中占一席之地。

combineLatest
合并最后一个数据。

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/timer';
import 'rxjs/add/operator/combineLatest';
import 'rxjs/add/operator/map';
const source1$ = Observable.timer(500, 1000);
const source2$ = Observable.timer(1000, 1000);
const result$ = source1$.combineLatest(source2$);
result$.subscribe(
	console.log,
	null,
	() => console.log('complete')
);

ombineLatest合并数据流的方式是当任何一个上游Observable产生数据时，从所有输出Observable对象中拿最后一次产生的数据（最新数据），然后把这些数据组合起来传给下游。

withLatestFrom
withLatestFrom的功能类似于combineLatest，但是给下游推送数据只能由一个上游Observable对象驱动。

import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/observable/timer'; 
import 'rxjs/add/operator/withLatestFrom'; 
import 'rxjs/add/operator/map'; 
const source1$ = Observable.timer(0, 2000).map(x => 100 * x); 
const source2$ = Observable.timer(500, 1000); 
const result$ = source1$.withLatestFrom(source2$, (a,b)=> a+b); 
	result$.subscribe( 
	console.log, 
	null, 
	() => console.log('complete') 
);

race
多个Observable对象在一起，看谁最先产生数据，就选择使用谁。

import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/observable/timer'; 
import 'rxjs/add/operator/race'; 
import 'rxjs/add/operator/map'; 
const source1$ = Observable.timer(0, 2000).map(x => x+'a'); 
const source2$ = Observable.timer(500, 1000).map(x => x+'b'); 
const winner$ = source1$.race(source2$); 
winner$.subscribe( 
	console.log, 
	null, 
	() => console.log('complete') 
);

高阶observable

高阶observable是Observable来管理多个Observable 对象。Rxjs擅长处理复杂的数据操作问题，这些问题往往需要涉及多个数据流，Rxjs将数据流也看做Observable。用现成的管理Observable对象的方法来管理Observable对象，这就是高阶 Observable的意义。

concatAll
concat是把所有输入的Observable首尾相连组合在一起，concatAll做的事情也一样，只不过concatAll只有一个上游Observable对象，这个Observable对象预期是一个高阶Observable对象，concatAll会对其中的内部Observable对象做concat。

const ho$ = Observable.interval(1000) 
.take(2) 
.map(x => Observable.interval(1500).map(y => x+':'+y).take(2)); 
const concated$ = ho$.concatAll();

mergeAll
mergeAll就是处理高阶Observable的merge，只是所有的输入Observable 来自于上游产生的内部Observable对象。

const ho$ = Observable.interval(1000) 
.take(2) 
.map(x => Observable.interval(1500).map(y => x+':'+y).take(2)); 
const concated$ = ho$.mergeAll();

zipAll
在Rxjs的官方文档中，这个操作符几乎没有文档，实际上，如果你能够理解zip，也能够理解前面介绍的concatAll和mergeAll，那么自然就能够理解zipAll。

const ho$ = Observable.interval(1000) 
.take(2) 
.map(x => Observable.interval(1500).map(y => x+':'+y).take(2)); 
const concated$ = ho$.zipAll();

combineAll
combineAll就是处理高阶Observable的combineLatest，可能是因为 combine-LatestAll太长了，所以Rxjs选择了combineAll这个名字。

const ho$ = Observable.interval(1000) 
.take(2) 
.map(x => Observable.interval(1500).map(y => x+':'+y).take(2)); 
const concated$ = ho$.combineAll();

总结

本文记录了Rxjs中合并多个Observable对象的用法。不同合并用法的区别在于用何种策略把上游多个Observable对象中数据转给下游产生的数据依然是Observable对象的Observable，称为高阶 Observable，Rxjs提供了合并高阶Observable对象中数据的操作符，实际上只是把多个Observable对象参数改成了一个高阶Observable对象。

来源：CSDN

作者：平台开发组

链接：https://blog.csdn.net/weixin_42674359/article/details/103772309

标签

rxjs

const

大数据

merge