天天看点

【RxJs】每天学习一点操作符 combineAll、combineLatest

始于2020年02月14日 14:22:14

combineLatest:

官方解释:

combineLatest(observable1: ObservableInput, observable2: ObservableInput, project: function, scheduler: Scheduler): Observable

组合多个 Observables 来创建一个 Observable ,该 Observable 的值根据每个输入 Observable 的最新值计算得出的。

【RxJs】每天学习一点操作符 combineAll、combineLatest

combineLatest会在

任一输入的 Observable 发出值时,

结合每个observable最新发出的值,并输出为数组,数组长度为输入的observable的个数,数组中值的顺序对应输入的顺序,即

第一个 Observable 的值放到数组的第一个。

如图所示,将第一个称为

observable1,第二个称为observable2,最开始observable1发出了a,此时是没有输出的,等到observable2输出了1之后,才输出了[a,1],然后observable1输出了b,这个时候observable2的最新值为1,所以会输出[b,1],依次类推,得到[b,2],[b,3],[b,4],[c,4],[d,4],[e,4]的输出。

为了输出的数组长度相同,

combineLatest会等待所有的

Observable至少输出一次值,如果某个Observable在所有Observable输出之前输出多个值,只会保留最新的值。如果某个 Observable 不发出值也不完成,

combineLatest

会永远不发出值也不结束。

combineLatest的结束的时机在于所有的

Observable都完成,如果有Observable提前完成,

combineLatest在其余

Observable发出值时依旧会输出。如果任一输入 Observable 发生错误,

combineLatest

也会 立马触发错误状态,所有的其他输入 Observable 都会被解除订阅。

官方提示:静态版本的 

combineLatest

 接受一个 Observables 数组或者每个 Observable 可以直接作为参数。如果你事先不知道你将要结合多少个 Observable, 那么 Observables 数组是一个好的选择。 传递空的数组将会导致返回 Observable 立马完成。

combineLatest

接受一个可选的参数投射函数,它接受返回 Observable 发出的值。投射函数可以返回任何数据,这些数据代替默认的数组被返回 Observable 发出。需要注意的是,投射函数并不接受值的数组,而是值本身。这意味着默认的投射函数就是一个接受所有参数并把它们放到一个数组里面的 函数。

测试代码:

/**
* 输入为多个observable
*/
const firstTimer = timer(0, 1000); // 从现在开始,每隔1秒发出0, 1, 2...
const secondTimer = timer(500, 1000); // 0.5秒后,每隔1秒发出0, 1, 2...
combineLatest(firstTimer, secondTimer).subscribe(value => console.log(value));
//输出
[0, 0] //0.5s后
[1, 0] //1s后
[1, 1] //1.5s后
[2, 1] //2s后
[2, 2] //2.5s后
[3, 2]
[3, 3]
[4, 3]
[4, 4]
[5, 4]
[5, 5]
....

//输入为observables
 const observables = [1, 5, 10].map(
      n => of(n).pipe(delay(n * 1000), startWith(0)) // 先发出0,然后在 n 秒后发出 n。
 );
 const combined = combineLatest(observables);
 combined.subscribe(value => console.log(value));
//输出
[0, 0, 0] //立刻输出
[1, 0, 0] // 1s后
[1, 5, 0] // 5s后
[1, 5, 10] // 10s后

           

combineAll:

官方解释:

combineAll(project: function): Observable

通过等待外部 Observable 完成然后应用 combineLatest ,将高阶 Observable 转化为一阶 Observable。

【RxJs】每天学习一点操作符 combineAll、combineLatest

combine会等待所有输入的Observable完成,然后使用combineLatest将高阶的Observable转为一阶段。

测试代码:

const source = interval(1000).pipe(take(2));
    // 将 source 发出的每个值映射成取前3个值的 interval observable
    const example = source.pipe(
      map(val => interval(1000).pipe(map(i => ` (${val}): ${i}`), take(3)))
    );
    const combined = example.pipe(combineAll());
    const subscribe = combined.subscribe(val => console.log(val));
    
// 输出
[0,0]
[1,0]
[1,1]
[2,1]
[2,2]