RxJS combineLatest

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

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

參量

returns

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

描述

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

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

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

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

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

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

例子

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

結(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)目功能動(dò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