6.Observerble创建方式


六.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的Observable
interval(x) 每 x 毫秒调用一次next
timer(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()


文章作者: 罗紫宇
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 罗紫宇 !
  目录