combineLatest

当任意 Observable 投射值时,投射每个 Observable 的最新值。

说明

如果你只需要 Observable 序列投射一个值,或只需要它们完成前的最新值时,forkJoin 会是更好的选择。

用法

combineLatest<O extends ObservableInput<any>, R>(
  ...observables: (SchedulerLike | O | ((...values: ObservedValueOf<O>[]) => R))[]
): Observable<R>

参数

参数说明
observables类型 (SchedulerLike | O | ((...values: ObservedValueOf[]) => R))[]

返回

类型: OperatorFunction<T, R>

示例

组合 3 个定时发送的 observables

import { timer, combineLatest } from 'rxjs';

// timerOne 在1秒时投射第一个值,然后每4秒发送一次
const timerOne = timer(1000, 4000);
// timerTwo 在2秒时投射第一个值,然后每4秒发送一次
const timerTwo = timer(2000, 4000);
// timerThree 在3秒时投射第一个值,然后每4秒发送一次
const timerThree = timer(3000, 4000);

// 当一个 timer 投射值时,将每个 timer 的最新值作为一个数组投射
const combined = combineLatest(timerOne, timerTwo, timerThree);

combined.subscribe(latestValues => {
  // 从 timerValOne、timerValTwo 和 timerValThree 中获取最新投射的值
  const [timerValOne, timerValTwo, timerValThree] = latestValues;
  /*
    示例:
    timerOne first tick: 'Timer One Latest: 1, Timer Two Latest:0, Timer Three Latest: 0
    timerTwo first tick: 'Timer One Latest: 1, Timer Two Latest:1, Timer Three Latest: 0
    timerThree first tick: 'Timer One Latest: 1, Timer Two Latest:1, Timer Three Latest: 1
  */
  console.log(
    `Timer One Latest: ${timerValOne},
     Timer Two Latest: ${timerValTwo},
     Timer Three Latest: ${timerValThree}`
  );
});

使用 projection 函数的 combineLatest

import { timer, combineLatest } from 'rxjs';

// timerOne 在1秒时投射第一个值,然后每4秒发送一次
const timerOne = timer(1000, 4000);
// timerTwo 在2秒时投射第一个值,然后每4秒发送一次
const timerTwo = timer(2000, 4000);
// timerThree 在3秒时投射第一个值,然后每4秒发送一次
const timerThree = timer(3000, 4000);

// combineLatest 还接收一个可选的 projection 函数
const combinedProject = combineLatest(timerOne, timerTwo, timerThree, (one, two, three) => {
  return `Timer One (Proj) Latest: ${one},
              Timer Two (Proj) Latest: ${two},
              Timer Three (Proj) Latest: ${three}`;
});
// 输出值
combinedProject.subscribe(latestValuesProject => console.log(latestValuesProject));

源码

https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/combineLatest.ts

在 GitHub 上编辑此页面 article.updatedAt Wed, Aug 11, 2021