Rxjs实践系列之combineLatest

概述

• 这是一个不太常用的操作符，很大一部分原因是有forkJoin操作符
• 用于数据的有系合并，功能类似Promice.all
• 可以多次返回数据，当每个参数流都发出一次数据后combineLatest会返回一次订阅数据，后面每个参数流只要返回值combineLatest都产生一次订阅数据

事例

import { interval, combineLatest } from 'rxjs'; 
import { delay, take } from 'rxjs/operators';


const source1 = interval(1000).pipe(
  take(2)
);
const source2 = interval(1000).pipe(
  delay(1000),take(2)
);
const source3 = interval(1000).pipe(
  delay(3000), take(5)
);
combineLatest(source1, source2, source3).subscribe(res => console.log(res)) 
// 3秒后输出 [1, 1, 0]
// 4秒后输出 [1, 1, 1]
// 5秒后输出 [1, 1, 2]
// 6秒后输出 [1, 1, 3]
// 7秒后输出 [1, 1, 4]

当每个流都拿到第一次数据时，combineLatest返回第一次数据; 再后任何一个流拿到了第二次数据时，combineLatest都返顺第二次数据，以此类推; 如上第3秒时source1和source2都没有数据返回了，但source3还会每秒返一个数据，combineLatest也会相应的回返前两参数流最后的值和source3的值有序的数组值

这里核心点，参数流都拿到第一次数据时返回第一次数据，然后只要有参数流任何一个有数据返回combineLatest都返回数据

一个很好的实例： 记账：三个输入框代表三个账的钱，当每个输入框都输了一个数据才会计算总数，有一个记错了修改了一下，总数也跟着变

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

本文使用 mdnice 排版