六.Observerble 创建方式
Observerble 实例有多种创建方式,称为 creation operator. 下面是常见的 operator.
- create
- of
- from
- fromEvent
- fromPromise
- never
- empty
- throw
- interval
- timer
// 以上篇的create为模板
var source = Rx.Observable.create(function(observer) {
observer.next('Jerry');
observer.next('Anna');
observer.complete();
});
source.subscribe({
next: function(value) { console.log(value) },
complete: function() { console.log('complete!'); },
error: function(error) { console.log(error) }
});
// Jerry
// Anna
// complete!
Rx.Observable.of
当只是需要同步传多个值时,可以使用of(x,y,z...)
.
var source = Rx.Observable.of('Jerry', 'Anna');
source.subscribe({
next: function(value) { console.log(value) },
complete: function() { console.log('complete!'); },
error: function(error) { console.log(error) }
});
// Jerry
// Anna
// complete!
Rx.Observable.from
from(x)
数组版of(x,y,z...)
,接收参数为数组
var source = Rx.Observable.from(['Jerry','Anna']);
// Jerry
// Anna
// complete!
任何可枚举类型都能作为参数, Set, WeakSet, Iterator等.
也可接收字符串,每个字符被视为一个数组元素.'lzy'
等同于['l','z','y']
也可接收Promise实例,promise实例resolve的返回值被送到next,reject返回值被送到error.同fromPromise
var source = Rx.Observable.from(new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello RxJS!');
},3000)
}))
source.subscribe({...})
// Hello RxJS!
// complete!
Rx.Observable.fromEvent
给事件建立Observable,通过fromEvent(x,y)
第一个参数是 DOM对象, 第二个参数是 监听事件名.
var source = Rx.Observable.fromEvent(document.body, 'click');
// 省略 source.subscribe({...})
// MouseEvent {...}
还有
fromEventPattern
方法.
Rx.Observable.never empty throw
empty()
创建一个空的observable,订阅时相当于立即调用complete.never()
创建一个无穷(never)的observable,订阅时什么都不会发生.throw(x)
创建一个抛错的observable,订阅时直接抛错,x为给抛错函数的传参.
var source = Rx.Observable.empty();
// 省略 source.subscribe({...})
// complete!
var source = Rx.Observable.never();
// 省略 source.subscribe({...})
// 没任何输出
var source = Rx.Observable.throw('Oop!');
// 省略 source.subscribe({...})
// Throw Error: Oop!
Rx.Observable.interval timer
内置定时器不停调用next的Observableinterval(x)
每 x 毫秒调用一次nexttimer(x,y)
x 毫秒后调用第一次next,之后每隔 y 毫秒调用一次next.timer(x)
只传一个参数,效果为 x 毫秒后调用一次next,无后续.
var source = Rx.Observable.create(function(observer) {
var i = 0;
setInterval(() => {
observer.next(i++);
}, 1000)
});
// 下面等同于上面面
var source = Rx.Observable.interval(1000);
unsubscribe 停止订阅
observable实例.subscribe()
执行会返回一个对象称为Subscription
Subscription
具有.unsubscribe()
方法用于释放资源,
用于释放例如interval()
,never()
等.
var source = Rx.Observable.timer(1000, 1000);
// 取得 subscription
var subscription = source.subscribe({...});
setTimeout(() => { // 五秒后调用停止订阅, RxJS 4.x 以前的版本用 dispose()
subscription.unsubscribe()
}, 5000);
// 0
// 1
// 2
// 3
// 4
总结
讲了 create
,of(x,y,z...)
,from([])
,fromEvent(document.body, 'click')
,
fromPromise(new Promise())
,never()
,empty()
,throw('Oop!')
,
interval(1000)
,timer(1000,5000)
,
subscription.unsubscribe()