- RxJS官方教程(一) 概览
- RxJS官方教程(二) Observable
- RxJS官方教程(三) Observable剖析
- RxJS官方教程(四) Observer和Subscription
- RxJS官方教程(五) Subject
- RxJS官方教程(六) 算子
Observer 观察者
什么是观察者?观察者是Observable提供的值的消费者。观察者只是一组回调,用于处理Observable递送的每种通知类型:next
,error
,和complete
。以下是典型Observer对象的示例:
var observer = {
next: x => console.log('Observer got a next value: ' + x),
error: err => console.error('Observer got an error: ' + err),
complete: () => console.log('Observer got a complete notification'),
};
要使用Observer,请将其提供给Observable的subscribe
方法:
observable.subscribe(observer);
观察者只是具有三个回调的对象,用于处理Observable提供的每种类型的通知。
RxJS中的观察者也可能是部分观察者。如果您不提供其中一个回调,Observable的执行仍将正常发生,某些类型的通知将被忽略,因为它们在Observer中没有相应的回调。
以下示例是没有complete
回调的Observer :
var observer = {
next: x => console.log('Observer got a next value: ' + x),
error: err => console.error('Observer got an error: ' + err),
};
订阅Observable时,您也可以只提供回调作为参数,而不是附加到Observer对象,例如:
observable.subscribe(x => console.log('Observer got a next value: ' + x));
在内部observable.subscribe
,它将使用第一个回调参数作为next
处理程序创建一个Observer对象。所有三种类型的回调都可以作为参数提供:
observable.subscribe(
x => console.log('Observer got a next value: ' + x),
err => console.error('Observer got an error: ' + err),
() => console.log('Observer got a complete notification')
);
Subscription 订阅
什么是订阅?订阅是表示可支配资源的对象,通常是Observable的执行。订阅有一个重要的方法unsubscribe
,它不需要参数,只需处理订阅所持有的资源。在以前版本的RxJS中,Subscription被称为“Disposable”。
var observable = Rx.Observable.interval(1000);
var subscription = observable.subscribe(x => console.log(x));
// Later:
// This cancels the ongoing Observable execution which
// was started by calling subscribe with an Observer.
subscription.unsubscribe();
订阅本质上只具有unsubscribe()
释放资源和取消Observable执行的功能。
订阅也可以放在一起,以便调用unsubscribe()
可以取消多个订阅。您可以通过将一个订阅“添加”到另一个订阅中来实现:
var observable1 = Rx.Observable.interval(400);
var observable2 = Rx.Observable.interval(300);
var subscription = observable1.subscribe(x => console.log('first: ' + x));
var childSubscription = observable2.subscribe(x => console.log('second: ' + x));
subscription.add(childSubscription);
setTimeout(() => {
// Unsubscribes BOTH subscription and childSubscription
subscription.unsubscribe();
}, 1000);
执行时,我们在控制台中看到:
second: 0
first: 0
second: 1
first: 1
second: 2
订阅还有一个remove(otherSubscription)
方法,以撤消添加子订阅。
网友评论