你必须知道的6个Rxjs的操作符

Posted chargo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了你必须知道的6个Rxjs的操作符相关的知识,希望对你有一定的参考价值。

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 delta
Rx.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的操作符的主要内容,如果未能解决你的问题,请参考以下文章

[RxJS] Implement RxJS `switchMap` by Canceling Inner Subscriptions as Values are Passed Through(代码片段

学python必须知道的30个技巧,这些你知道吗?

异步编程你必须知道的6个最佳实践

超实用!K8s 开发者必须知道的 6 个开源工具

C#程序员经常用到的10个实用代码片段 - 操作系统

你知道的Go切片扩容机制可能是错的