【转载】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.