【轉載】RxJS: 6個你必須知道的操做符

總結的很到爲！原文地址！收藏下，已被須要時查看！

[譯] RxJS: 6個你必須知道的操做符

原文連接: netbasal.com/rxjs-six-op…

1. concat

// 模擬 HTTP 請求
const getPostOne$ = Rx.Observable.timer(3000).mapTo({id: 1});
const getPostTwo$ = Rx.Observable.timer(1000).mapTo({id: 2});

Rx.Observable.concat(getPostOne$, getPostTwo$).subscribe(res => console.log(res));
複製代碼

按順序訂閱 Observables，可是隻有當一個完成並讓我知道，而後纔會開始下一個。

當順序很重要時，使用此操做符，例如當你須要按順序的發送 HTTP 請求時。

2. forkJoin

forkJoin 是 Rx 版的 Promise.all() 。

const getPostOne$ = Rx.Observable.timer(1000).mapTo({id: 1});
const getPostTwo$ = Rx.Observable.timer(2000).mapTo({id: 2});

Rx.Observable.forkJoin(getPostOne$, getPostTwo$).subscribe(res => console.log(res)) 
複製代碼

直到全部的 Observables 都完成了才通知我，而後一次性地給我全部的值。(以數組的形式)

當你須要並行地運行 Observables 時使用此操做符。

3. mergeMap

const post$ = Rx.Observable.of({id: 1});
const getPostInfo$ = Rx.Observable.timer(3000).mapTo({title: "Post title"});

const posts$ = post$.mergeMap(post => getPostInfo$).subscribe(res => console.log(res));
複製代碼

首先，咱們得理解 Observables 世界中的兩個術語:

1. 源 (或外部) Observable - 在本例中就是 post$ Observable 。
2. 內部 Observable - 在本例中就是 getPostInfo$ Observable 。

僅當內部 Obervable 發出值時，經過合併值到外部 Observable 來讓我知道。

4. pairwise

// 追蹤頁面滾動增量
Rx.Observable
  .fromEvent(document, 'scroll')
  .map(e => window.pageYOffset)
  .pairwise()
  .subscribe(pair => console.log(pair)); // pair[1] - pair[0]
複製代碼

當 Observable 發出值時讓我知道，但還得給我前一個值。(以數組的形式)

頁面滾動…

從輸入 Observable 的第二個值開始觸發。

5. switchMap

const clicks$ = Rx.Observable.fromEvent(document, 'click');
const innerObservable$ = Rx.Observable.interval(1000);

clicks$.switchMap(event => innerObservable$)
                    .subscribe(val => console.log(val));
複製代碼

相似於 mergeMap，可是當源 Observable 發出值時會取消內部 Observable 先前的全部訂閱 。

在咱們的示例中，每次我點擊頁面的時，先前的 interval 訂閱都會取消，而後開啓一個新的。

6. combineLatest

const intervalOne$ = Rx.Observable.interval(1000);
const intervalTwo$ = Rx.Observable.interval(2000);

Rx.Observable.combineLatest(
    intervalOne$,
    intervalTwo$ 
).subscribe(all => console.log(all));
複製代碼

當任意 Observable 發出值時讓我知道，但還要給我其餘 Observalbes 的最新值。(以數組的形式)

例如當你須要處理應用中的過濾器時，此操做符很是有用。

若是你想了解更多關於 Observables 的內容，能夠閱讀個人文章:

1. Observables under the hood.
2. Understanding Subjects In Rx.