RxJS combineLatest

組合多個 Observable 創(chuàng)建一個 Observable，其值是根據(jù)其每個輸入 Observable 的最新值計算得出的。

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

參量

returns

Observable<R>：來自每個輸入 Observable 的最新值的投影值的 Observable，或來自每個輸入 Observable 的最新值的數(shù)組。

描述

每當任何 Observable 輸入發(fā)出一個值時，它都會使用來自所有輸入的最新值來計算公式，然后發(fā)出該公式的輸出。

combineLatest 合并所有作為參數(shù)傳遞的 Observable 的值。這是通過按順序訂閱每個 Observable 來完成的，并且每當發(fā)出任何 Observable 時，就從每個 Observable 中收集最新值的數(shù)組。因此，如果將nObservables 傳遞給運算符，則返回的 Observable 將始終發(fā)出 n 值數(shù)組，其順序與傳遞的 Observables 的順序相對應（從第一個 Observable 的值排在第一位，依此類推）。

靜態(tài)版本 combineLatest 接受一個 Observable 數(shù)組，或者每個 Observable 都可以直接作為參數(shù)放置。請注意，如果您事先不知道將合并多少個 Observable，則 Observable 數(shù)組是一個不錯的選擇。傳遞空數(shù)組將導致 Observable 立即完成。

為確保輸出數(shù)組的長度始終相同，combineLatest 實際上將等待所有輸入 Observable 至少發(fā)出一次，然后再開始發(fā)出結果。這意味著，如果某個 Observable 在其他 Observable 開始發(fā)出值之前發(fā)出值，則所有這些值（最后一個值）都將丟失。另一方面，如果某個 Observable 不發(fā)出值而是完成一個值，則結果 Observable 將在同一時刻完成而不會發(fā)出任何東西，因為現(xiàn)在將不可能從完成的 Observable 中包含值到結果數(shù)組中。同樣，如果某些輸入 Observable 不會發(fā)出任何值并且永遠不會完成，那么 combineLatest 也將永遠不會發(fā)出并且永遠不會完成，因為同樣，它將等待所有流發(fā)出某些值。

如果至少有一個 Observable 傳遞給了 combineLatest 所有傳遞的 Observable ，并且所有事物都發(fā)出了某種東西，那么當所有組合流完成時，結果 Observable 將完成。因此，即使某些Observable完成，combineLatest 當其他 Observable 執(zhí)行時，result 仍將發(fā)出值。在完成 Observable 的情況下，其從現(xiàn)在開始的值將始終是最后發(fā)出的值。另一方面，如果有任何可觀察的錯誤，combineLatest 也會立即發(fā)生錯誤，所有其他可觀察的對象都將被取消訂閱。

combineLatest 接受作為可選參數(shù) project 函數(shù)，該函數(shù)接受通常由結果 Observable 發(fā)出的所有值作為參數(shù)。 project 可以返回任何類型的值，然后該值將由 Observable 而不是默認數(shù)組發(fā)出。注意，project 該值數(shù)組不是參數(shù)，而是值本身。這意味著 project 可以將 default 想象為一個接受所有參數(shù)并將其放入數(shù)組的函數(shù)。

例子

結合兩個計時器 Observables

import { combineLatest, timer } from 'rxjs';


const firstTimer = timer(0, 1000); // emit 0, 1, 2... after every second, starting from now
const secondTimer = timer(500, 1000); // emit 0, 1, 2... after every second, starting 0,5s from now
const combinedTimers = combineLatest(firstTimer, secondTimer);
combinedTimers.subscribe(value => console.log(value));
// Logs
// [0, 0] after 0.5s
// [1, 0] after 1s
// [1, 1] after 1.5s
// [2, 1] after 2s

結合一系列可觀察物

import { combineLatest, of } from 'rxjs';
import { delay, starWith } from 'rxjs/operators';


const observables = [1, 5, 10].map(
  n => of(n).pipe(
    delay(n * 1000),   // emit 0 and then emit n after n seconds
    startWith(0),
  )
);
const combined = combineLatest(observables);
combined.subscribe(value => console.log(value));
// Logs
// [0, 0, 0] immediately
// [1, 0, 0] after 1s
// [1, 5, 0] after 5s
// [1, 5, 10] after 10s

使用項目功能動態(tài)計算身體質量指數(shù)

import { combineLatest, of } from 'rxjs';
import { map } from 'rxjs/operators';


const weight = of(70, 72, 76, 79, 75);
const height = of(1.76, 1.77, 1.78);
const bmi = combineLatest(weight, height).pipe(
  map(([w, h]) => w / (h * h)),
);
bmi.subscribe(x => console.log('BMI is ' + x));


// With output to console:
// BMI is 24.212293388429753
// BMI is 23.93948099205209
// BMI is 23.671253629592222

超載

combineLatest(sources: [O1], resultSelector: (v1: ObservedValueOf<O1>) => R, scheduler?: SchedulerLike): Observable<R>

returns Observable<R>

combineLatest(sources: [O1, O2], resultSelector: (v1: ObservedValueOf<O1>, v2: ObservedValueOf<O2>) => R, scheduler?: SchedulerLike): Observable<R>

returnsObservable<R>

combineLatest(sources: [O1, O2, O3], resultSelector: (v1: ObservedValueOf<O1>, v2: ObservedValueOf<O2>, v3: ObservedValueOf<O3>) => R, scheduler?: SchedulerLike): Observable<R>

returnsObservable<R>

combineLatest(sources: [O1, O2, O3, O4], resultSelector: (v1: ObservedValueOf<O1>, v2: ObservedValueOf<O2>, v3: ObservedValueOf<O3>, v4: ObservedValueOf<O4>) => R, scheduler?: SchedulerLike): Observable<R>

returnsObservable<R>

combineLatest(sources: [O1, O2, O3, O4, O5], resultSelector: (v1: ObservedValueOf<O1>, v2: ObservedValueOf<O2>, v3: ObservedValueOf<O3>, v4: ObservedValueOf<O4>, v5: ObservedValueOf<O5>) => R, scheduler?: SchedulerLike): Observable<R>

returnsObservable<R>

combineLatest(sources: [O1, O2, O3, O4, O5, O6], resultSelector: (v1: ObservedValueOf<O1>, v2: ObservedValueOf<O2>, v3: ObservedValueOf<O3>, v4: ObservedValueOf<O4>, v5: ObservedValueOf<O5>, v6: ObservedValueOf<O6>) => R, scheduler?: SchedulerLike): Observable<R>

returnsObservable<R>

combineLatest(sources: O[], resultSelector: (...args: ObservedValueOf<O>[]) => R, scheduler?: SchedulerLike): Observable<R>

returnsObservable<R>

combineLatest(v1: O1, resultSelector: (v1: ObservedValueOf<O1>) => R, scheduler?: SchedulerLike): Observable<R>

returnsObservable<R>

combineLatest(v1: O1, v2: O2, resultSelector: (v1: ObservedValueOf<O1>, v2: ObservedValueOf<O2>) => R, scheduler?: SchedulerLike): Observable<R>

returnsObservable<R>

combineLatest(v1: O1, v2: O2, v3: O3, resultSelector: (v1: ObservedValueOf<O1>, v2: ObservedValueOf<O2>, v3: ObservedValueOf<O3>) => R, scheduler?: SchedulerLike): Observable<R>

returnsObservable<R>

combineLatest(v1: O1, v2: O2, v3: O3, v4: O4, resultSelector: (v1: ObservedValueOf<O1>, v2: ObservedValueOf<O2>, v3: ObservedValueOf<O3>, v4: ObservedValueOf<O4>) => R, scheduler?: SchedulerLike): Observable<R> 參量v1類型：O1。v2類型：O2。v3類型：O3。v4類型：O4。resultSelector類型：。(v1: ObservedValueOf, v2: ObservedValueOf, v3: ObservedValueOf, v4: ObservedValueOf) => R調度器可選的。默認值為undefined。類型：SchedulerLike。 returnsObservable<R>

combineLatest(v1: O1, v2: O2, v3: O3, v4: O4, v5: O5, resultSelector: (v1: ObservedValueOf<O1>, v2: ObservedValueOf<O2>, v3: ObservedValueOf<O3>, v4: ObservedValueOf<O4>, v5: ObservedValueOf<O5>) => R, scheduler?: SchedulerLike): Observable<R>

returnsObservable<R>

combineLatest(v1: O1, v2: O2, v3: O3, v4: O4, v5: O5, v6: O6, resultSelector: (v1: ObservedValueOf<O1>, v2: ObservedValueOf<O2>, v3: ObservedValueOf<O3>, v4: ObservedValueOf<O4>, v5: ObservedValueOf<O5>, v6: ObservedValueOf<O6>) => R, scheduler?: SchedulerLike): Observable<R>

returnsObservable<R>

combineLatest(sources: [O1], scheduler: SchedulerLike): Observable<[ObservedValueOf<O1>]>

returnsObservable<[ObservedValueOf<O1>]>

combineLatest(sources: [O1, O2], scheduler: SchedulerLike): Observable<[ObservedValueOf<O1>, ObservedValueOf<O2>]>

returnsObservable<[ObservedValueOf<O1>, ObservedValueOf<O2>]>

combineLatest(sources: [O1, O2, O3], scheduler: SchedulerLike): Observable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>]>

returns Observable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>]>

combineLatest(sources: [O1, O2, O3, O4], scheduler: SchedulerLike): Observable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>]>

returnsObservable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>]>

combineLatest(sources: [O1, O2, O3, O4, O5], scheduler: SchedulerLike): Observable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>, ObservedValueOf<O5>]>

returnsObservable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>, ObservedValueOf<O5>]>

combineLatest(sources: [O1, O2, O3, O4, O5, O6], scheduler: SchedulerLike): Observable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>, ObservedValueOf<O5>, ObservedValueOf<O6>]>

returnsObservable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>, ObservedValueOf<O5>, ObservedValueOf<O6>]>

combineLatest(sources: O[], scheduler: SchedulerLike): Observable<ObservedValueOf<O>[]>

returnsObservable<ObservedValueOf<O>[]>

combineLatest(sources: [O1]): Observable<[ObservedValueOf<O1>]> 參量資料來源類型：[O1]。returnsObservable<[ObservedValueOf<O1>]>

combineLatest(sources: [O1, O2]): Observable<[ObservedValueOf<O1>, ObservedValueOf<O2>]>

returnsObservable<[ObservedValueOf<O1>, ObservedValueOf<O2>]>

combineLatest(sources: [O1, O2, O3]): Observable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>]>

returnsObservable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>]>

combineLatest(sources: [O1, O2, O3, O4]): Observable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>]>

returnsObservable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>]> combineLatest(sources: [O1, O2, O3, O4, O5]): Observable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>, ObservedValueOf<O5>]>

returnsObservable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>, ObservedValueOf<O5>]>

combineLatest(sources: [O1, O2, O3, O4, O5, O6]): Observable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>, ObservedValueOf<O5>, ObservedValueOf<O6>]>

returnsObservable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>, ObservedValueOf<O5>, ObservedValueOf<O6>]>

combineLatest(sources: O[]): Observable<ObservedValueOf<O>[]>

returnsObservable<ObservedValueOf<O>[]>

combineLatest(v1: O1, scheduler?: SchedulerLike): Observable<[ObservedValueOf<O1>]>

returnsObservable<[ObservedValueOf<O1>]>

combineLatest(v1: O1, v2: O2, scheduler?: SchedulerLike): Observable<[ObservedValueOf<O1>, ObservedValueOf<O2>]>

returnsObservable<[ObservedValueOf<O1>, ObservedValueOf<O2>]>

combineLatest(v1: O1, v2: O2, v3: O3, scheduler?: SchedulerLike): Observable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>]>

returnsObservable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>]>

combineLatest(v1: O1, v2: O2, v3: O3, v4: O4, scheduler?: SchedulerLike): Observable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>]>

returnsObservable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>]>

combineLatest(v1: O1, v2: O2, v3: O3, v4: O4, v5: O5, scheduler?: SchedulerLike): Observable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>, ObservedValueOf<O5>]>

returnsObservable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>, ObservedValueOf<O5>]>

combineLatest(v1: O1, v2: O2, v3: O3, v4: O4, v5: O5, v6: O6, scheduler?: SchedulerLike): Observable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>, ObservedValueOf<O5>, ObservedValueOf<O6>]>

returnsObservable<[ObservedValueOf<O1>, ObservedValueOf<O2>, ObservedValueOf<O3>, ObservedValueOf<O4>, ObservedValueOf<O5>, ObservedValueOf<O6>]>

combineLatest(...observables: O[]): Observable<any[]>

returnsObservable<any[]>

combineLatest(...observables: any[]): Observable<R>

returnsObservable<R>

combineLatest(array: O[], resultSelector: (...values: ObservedValueOf<O>[]) => R, scheduler?: SchedulerLike): Observable<R>

returnsObservable<R>

combineLatest(...observables: (SchedulerLike | O)[]): Observable<any[]>

returnsObservable<any[]>

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

returnsObservable<R>

combineLatest(...observables: any[]): Observable<R>

也可以看看

• combineAll
• merge
• withLatestFrom