RxJS 学习系列 7. 创建操作符 from, of, range, interval, timer, empty
字数 129阅读 92
学好 RxJS 的关键是对 Operators (操作符)的灵活使用,操作符大多是纯函数,我们使用操作符创建,转换,过滤,组合,错误处理,辅助操作 Observables。具体参见
不同的操作符有不同的使用场景,有些名字容易混淆,可以对比的学习。
下面介绍几个可以创建 Observable 的运算符,具体的介绍请问官网
例子:https://codepen.io/mafeifan/pen/eQKNvN
const {from, of, range, interval, timer, empty} = rxjs;
function f() {
return from(arguments);
}
const observer = {
next: value => {
console.log('Next: ' + value);
},
error: error => {
console.log('Error:', error);
},
complete: () => {
console.log('Complete');
}
}
f(1, 2, 3).subscribe(observer);
from('foo').subscribe(observer);
const s = new Set(['foo', window]);
from(s).subscribe(observer);
const source = from(new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello RxJS!');
},3000)
}));
source.subscribe(observer);
of(1, 2, 3).subscribe(observer);
of([4, 5, 6]).subscribe(observer);
range(10, 2).subscribe(observer);
const num = 1000;
interval(num).subscribe(observer);
timer(2000).subscribe(observer);
empty().subscribe({
next: () => console.log(`empty`),
complete: () => console.log('empty Complete!')
});
const subscription = timer(5000, 1000).subscribe(observer);

来自 https://www.jianshu.com/p/3ffed727dbcc
rxjs操作符:of和from
感觉of
操作符在快速创建Observable的时候挺方便的,使用from
在进行一些转化的,对这两个操作符进行整理一下。
操作符of
1 2 3 4 5 6 7 8 9 10 11 12
| public static of(values: ...T, scheduler: Scheduler): Observable<T> ``` 创建一个Observable,它会一次发出提供的参数,最后发出完成通知。
这个静态操作符用于创建简单的Observable,该Observable只发出给定的参数,在发送完这些参数后发出完成通知。它可以用来和其他的Observables组合比如说`concat`。默认情况下,使用`null`调度器,这意味着`next`通知是同步发出的,尽管使用不同的调度器可以决定这些通知何时送到。
例如: ``` js of(1, 2, 3).subscribe(res => { console.log(res); }); // 控制台依次输出:1, 2, 3
|
可以使用concat
和其他Observable组合,例如:
1 2 3 4 5 6 7
| const ofListObs = of(1, 2, 3); const strObs = of('a', 'b', 'c'); const intervalObs = interval(500); const resObs = concat(ofListObs, strObs, intervalObs); resObs.subscribe(res => { console.log(res); });
|
依次先发出1、2、3、a、b、c,然后一秒发出一个数字。
操作符 from
1
| public static from(ish: ObservableInput<T>, scheduler: Scheduler): Observable<T>
|
从一个数组、类数组对象、promise、迭代器对象或者类Observable对象创建一个Observable。
几乎可以把任何东西都能转化为Observable。
将数组转化为Observable
从一般数组转化:
1 2 3 4
| from([1, 2, 3]).subscribe(res => { console.log(res); });
|
将Observable转化为Observable:
1 2 3 4 5 6
| from([of(1, 2, 3), of('a', 'b', 'c')]).pipe( concatAll(), ).subscribe(res => { console.log(res); });
|
将字符串转化为Observable
1 2 3 4
| from('test').subscribe(res => { console.log(res); });
|
将一个无限迭代器转化为Observable
创建一个无限迭代器:
1 2 3 4 5 6 7
| static * generateDoubles(seed) { let i = seed; while (true) { yield i; i = 2 * i; } }
|
通过from
转化迭代器为Observable(只取迭代器的前十个):
1 2 3 4 5 6 7
| const iterator = OfFromComponent.generateDoubles(3); from(iterator).pipe( take(10), ).subscribe(res => { console.log(res); });
|
从promise转化
1 2 3
| from(new Promise(resolve => resolve('hello'))).subscribe(res => { console.log(res); });
|
从集合中转化
1 2 3 4 5 6 7
| const m = new Map(); m.set({a: '3'}, 'hi'); m.set({b: 4}, 'tony'); from(m).subscribe(res => { console.log(res); });
|
扩展:fromPromise、fromEvent、fromEventPattern
除了通用的from
操作符,还有fromPromise
专门处理Promise转换Observable,以及fromEvent
专门处理事件转换Observable。
fromPromise
1
| public static fromPromise(promise: PromiseLike<T>, scheduler: Scheduler): Observable<T>
|
将promise转化为Observable.
返回一个仅仅发出Promise resolve过的值然后完成的Observable。
如果Promise resolve一个值,输出Observable发出这个值然后完成。如果Promise被rejected,输出Observable后发生相应的错误。
1 2 3 4 5 6 7 8 9 10 11 12
| fromPromise(fetch('http://www.mxnzp.com/api/weather/current/%E6%B7%B1%E5%9C%B3')).subscribe( res => { if (res.status === 200) { res.json().then(r => { console.log(r); }); } }, err => { console.log('err', err); } );
|
fetch方法比较特殊,返回一个Promise,然后json()
后继续Promise.then()
才可以拿到接口的返回值。
fromEvent
1
| public static fromEvent(target: EventTargetLike, eventName: string, options: EventListenerOptions, selector: SelectorMethodSignature<T>): Observable<T>
|
创建一个Observable,该Observable发出来自给定事件对象的指定类型事件。
创建一个来自于DOM事件,或者Node的EventEmitter事件或其他事件的Observable。
通过给“事件目标”添加时间监听器的方式创建Observable,可能会是拥有addEventListener
和removeEventListener
方法的对象,一个Node.js的EventEmitter,一个jQuery式的EventEmitter,一个Dom的节点集合,或者Dom的HTMLCollection。Observable被订阅的时候事件处理函数会被添加,当取消订阅的时候会将事件处理函数移除。
| 名称 | 类型 | 属性 | 描述 |
| ——– | —–: | :—-: |:—-: |
| target | EventTargetLike | 必须 | 事件目标,事件处理的对象 |
| eventName | string | 必填 | 事件名称,从target发出 |
| options | EventListenerOptions | 可选 | 传递给addEventListener的参数|
| selector | SelectorMethodSignature | 可选 | 函数处理的结果 |
1 2 3 4
| fromEvent(document, 'click').subscribe(x => { console.log('click', x); });
|
对上面的程序进行扩展,点击页面上的任何地方,出现一个小东西,0.5s后消失:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| constructor( private render: Renderer2, private el: ElementRef, ) { } fromEvent(document, 'click').subscribe((event: MouseEvent) => { const x = event.clientX; const y = event.clientY;
const devDom = this.render.createElement('div'); devDom.className = 'lover'; this.render.setStyle(devDom, 'top', y + 'px'); this.render.setStyle(devDom, 'left', x + 'px'); this.render.appendChild(this.el.nativeElement, devDom); timer(500).subscribe( num => { this.render.removeChild(this.el.nativeElement, devDom); }); });
|
fromEventPattern
一个从基于addHandler/removeHandler方法的api创建Observable。目前感觉没什么用,先占个坑,后面用到了再细化。
整理了of
操作符和from
操作符的用法,以及相关的fromEvent
和fromPromise
操作符。
来自 http://blog.tcs-y.com/2019/04/03/rxjs-operate-of-from/