天天看點

【RxJs】每天學習一點操作符 combineAll、combineLatest

始于2020年02月14日 14:22:14

combineLatest:

官方解釋:

combineLatest(observable1: ObservableInput, observable2: ObservableInput, project: function, scheduler: Scheduler): Observable

組合多個 Observables 來建立一個 Observable ,該 Observable 的值根據每個輸入 Observable 的最新值計算得出的。

【RxJs】每天學習一點操作符 combineAll、combineLatest

combineLatest會在

任一輸入的 Observable 發出值時,

結合每個observable最新發出的值,并輸出為數組,數組長度為輸入的observable的個數,數組中值的順序對應輸入的順序,即

第一個 Observable 的值放到數組的第一個。

如圖所示,将第一個稱為

observable1,第二個稱為observable2,最開始observable1發出了a,此時是沒有輸出的,等到observable2輸出了1之後,才輸出了[a,1],然後observable1輸出了b,這個時候observable2的最新值為1,是以會輸出[b,1],依次類推,得到[b,2],[b,3],[b,4],[c,4],[d,4],[e,4]的輸出。

為了輸出的數組長度相同,

combineLatest會等待所有的

Observable至少輸出一次值,如果某個Observable在所有Observable輸出之前輸出多個值,隻會保留最新的值。如果某個 Observable 不發出值也不完成,

combineLatest

會永遠不發出值也不結束。

combineLatest的結束的時機在于所有的

Observable都完成,如果有Observable提前完成,

combineLatest在其餘

Observable發出值時依舊會輸出。如果任一輸入 Observable 發生錯誤,

combineLatest

也會 立馬觸發錯誤狀态,所有的其他輸入 Observable 都會被解除訂閱。

官方提示:靜态版本的 

combineLatest

 接受一個 Observables 數組或者每個 Observable 可以直接作為參數。如果你事先不知道你将要結合多少個 Observable, 那麼 Observables 數組是一個好的選擇。 傳遞空的數組将會導緻傳回 Observable 立馬完成。

combineLatest

接受一個可選的參數投射函數,它接受傳回 Observable 發出的值。投射函數可以傳回任何資料,這些資料代替預設的數組被傳回 Observable 發出。需要注意的是,投射函數并不接受值的數組,而是值本身。這意味着預設的投射函數就是一個接受所有參數并把它們放到一個數組裡面的 函數。

測試代碼:

/**
* 輸入為多個observable
*/
const firstTimer = timer(0, 1000); // 從現在開始,每隔1秒發出0, 1, 2...
const secondTimer = timer(500, 1000); // 0.5秒後,每隔1秒發出0, 1, 2...
combineLatest(firstTimer, secondTimer).subscribe(value => console.log(value));
//輸出
[0, 0] //0.5s後
[1, 0] //1s後
[1, 1] //1.5s後
[2, 1] //2s後
[2, 2] //2.5s後
[3, 2]
[3, 3]
[4, 3]
[4, 4]
[5, 4]
[5, 5]
....

//輸入為observables
 const observables = [1, 5, 10].map(
      n => of(n).pipe(delay(n * 1000), startWith(0)) // 先發出0,然後在 n 秒後發出 n。
 );
 const combined = combineLatest(observables);
 combined.subscribe(value => console.log(value));
//輸出
[0, 0, 0] //立刻輸出
[1, 0, 0] // 1s後
[1, 5, 0] // 5s後
[1, 5, 10] // 10s後

           

combineAll:

官方解釋:

combineAll(project: function): Observable

通過等待外部 Observable 完成然後應用 combineLatest ,将高階 Observable 轉化為一階 Observable。

【RxJs】每天學習一點操作符 combineAll、combineLatest

combine會等待所有輸入的Observable完成,然後使用combineLatest将高階的Observable轉為一階段。

測試代碼:

const source = interval(1000).pipe(take(2));
    // 将 source 發出的每個值映射成取前3個值的 interval observable
    const example = source.pipe(
      map(val => interval(1000).pipe(map(i => ` (${val}): ${i}`), take(3)))
    );
    const combined = example.pipe(combineAll());
    const subscribe = combined.subscribe(val => console.log(val));
    
// 輸出
[0,0]
[1,0]
[1,1]
[2,1]
[2,2]