你必須知道的6個Rxjs的操作符

來源:互聯網
上載者:User

標籤:情況下   scroll   get   tin   並發   inf   console   rom   doc   

1.Concat

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,當你一次性subscribe的時候,次操作符會合并多個observable的結果到輸出的obserable中。

如果你的關注點在於輸出的順序的情況下,可以使用此操作符。比如當你需要按順序發送ajax請求的時候可以使用此操作符。

2.forkJoin

forkJoin是Promise.all()方法的Rx版本。

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)) 
// 列印[{id: 1}, {id: 2}]

當你需要並發的運行observable的時候使用此操作符。

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));

首先說下Rx中的兩個術語:

1.source observable 這裡指的是post$

2.inner observable 這裡指的是getPostInfo$

當inner observable發出值得時候,合并值到輸出的observable中。

4.pairWise

// Tracking the scroll deltaRx.Observable  .fromEvent(document, ‘scroll‘)  .map(e => window.pageYOffset)  .pairwise()  .subscribe(pair => console.log(pair)); // pair[1] - pair[0]

把當前的值和上一個值作為數組輸出。如上樣本當觸發scroll事件的時候可以輸出[10, 11] [11, 12] [12, 13]...

5.switchMap

const clicks$ = Rx.Observable.fromEvent(document, ‘click‘);const innerObservable$ = Rx.Observable.interval(1000);clicks$.switchMap(event => innerObservable$)                    .subscribe(val => console.log(val));

在這個樣本中,每當點擊document的時候之前的interval的subscription會被取消並且會開始一個新的值。

6.combineLatest

const clicks$ = Rx.Observable.fromEvent(document, ‘click‘);const innerObservable$ = Rx.Observable.interval(1000);clicks$.switchMap(event => innerObservable$)                    .subscribe(val => console.log(val));

如果子流a在等待其他流發射資料期間又發射了新資料而且其他流未發送資料,則使用子流最新發射的資料進行合并。

你必須知道的6個Rxjs的操作符

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: