RxJS combineLatest

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

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

參量

returns

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

描述

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

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

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

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

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

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

例子

結(jié)合兩個計(jì)時器 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

結(jié)合一系列可觀察物

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

使用項(xiàng)目功能動態(tài)計(jì)算身體質(zhì)量指數(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調(diào)度器可選的。默認(rèn)值為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