1、Observable简写形式
Observable对象都是一个个的对象,可以包含next、complete、以及error三个方法,用于接受Observable的三种不同事件。在创建Observable对象后,添加的事件中可以不用提供complete以及error方法。
为了简洁性,subscribe也可以直接接受函数作为参数,第一个如果是函数类型,就会被认为是next、第二个函数参数被认为是error,第三个则是complete。
demoObserver() {
const theSubscribe = observer => {
const handler = setInterval(() => {
observer.next(Math.random()*100);
if(Math.random()*100 > 80) {
clearInterval(handler);
observer.complete()
}
}, 1000);
}
const source$ = new Observable(theSubscribe);
source$.subscribe(
item => console.log(item), // next函数
err => console.log(err), // error函数
() => console.log('no more data...') // complete函数
)
}
如果不关心对异常的处理,但是关心Observable的终止事件,那依然要传递第二个参数来占位置,也就是null,表示不处理异常事件。
source$.subscribe(
item => console.log(item), // next函数
null, // error函数
() => console.log('no more data...') // complete函数
)
2、退订Observable
Observable和Observer之间建立的关系是通过subscribe,但是有的情况下需要切断二者之间的联系,如:Observer只需要监听一个Observable对象一分钟,一分钟之后就不再关心这个Observable这个对象的任何事件了。那么就需要“退订”了。
const theSubscribe = observer => {
let number = 1;
const handler = setInerval(() => {
observer.next(number++);
}, 1000);
return {
unsubscribe: () => {
clearInterval(handler);
}
}
}
theSubscribe函数有返回结果,返回结果是一个对象,其中包含一个unsubscribe字段,这个unsubscribe字段的值是另一个函数,调用了clearInterval来清除setInterval产生的效果。
const source$ = new Observable(theSubscribe);
const subscription = source$.subscribe(item => console.log(item));
setTimeout(() => {
subscription.unsubscribe();
});
在输出了1、2、3之后,unsubcribe函数被调用,作为Observer不再接受到被推送的数据,但是作为Observale的source$
就再也不会产生新的数据了,输出结束,这是一个完整的“订阅”和“退订”过程。
虽然unsubcribe函数调用之后,作为Observer不再接受到被推送的数据,但是作为Observable的source$
并没有终结,因为始终没有调用complete,只不过它再也不会调用next函数了。
RxJS中很重要的一点:Observable产生的事件,只有Observer通过subscribe订阅之后才会收到,在unsubscribe之后就不会再收到。
网友评论