发表于: 2020-01-16 23:01:24
1 1573
今日完成:
可观察对象(Observable)
可观察对象支持在应用中的发布者和订阅者之间传递消息。 在需要进行事件处理、异步编程和处理多个值的时候,可观察对象相对其它技术有着显著的优点。
可观察对象是声明式的 —— 也就是说,虽然你定义了一个用于发布值的函数,但是在有消费者订阅它之前,这个函数并不会实际执行。 订阅之后,当这个函数执行完或取消订阅时,订阅者就会收到通知。
可观察对象可以发送多个任意类型的值 —— 字面量、消息、事件。无论这些值是同步发送的还是异步发送的,接收这些值的 API 都是一样的。 由于准备(setup)和清场(teardown)的逻辑都是由可观察对象自己处理的,因此你的应用代码只管订阅并消费这些值就可以了,做完之后,取消订阅。无论这个流是击键流、HTTP 响应流还是定时器,对这些值进行监听和停止监听的接口都是一样的。
基本用法和词汇
作为发布者,你创建一个 Observable
的实例,其中定义了一个订阅者(subscriber)函数。 当有消费者调用 subscribe()
方法时,这个函数就会执行。 订阅者函数用于定义“如何获取或生成那些要发布的值或消息”。
// Create an Observable that will start listening to geolocation updates
// when a consumer subscribes.
const locations = new Observable((observer) => {
// Get the next and error callbacks. These will be passed in when
// the consumer subscribes.
const {next, error} = observer;
let watchId;
// Simple geolocation API check provides values to publish
if ('geolocation' in navigator) {
watchId = navigator.geolocation.watchPosition(next, error);
} else {
error('Geolocation not available');
}
// When the consumer unsubscribes, clean up data ready for next subscription.
return {unsubscribe() { navigator.geolocation.clearWatch(watchId); }};
});
// Call subscribe() to start listening for updates.
const locationsSubscription = locations.subscribe({
next(position) { console.log('Current Position: ', position); },
error(msg) { console.log('Error Getting Location: ', msg); }
});
// Stop listening for location after 10 seconds
setTimeout(() => { locationsSubscription.unsubscribe(); }, 10000);
定义观察者
用于接收可观察对象通知的处理器要实现 Observer
接口。这个对象定义了一些回调函数来处理可观察对象可能会发来的三种通知:
通知类型 | 说明 |
---|---|
next | 必要。用来处理每个送达值。在开始执行后可能执行零次或多次。 |
error | 可选。用来处理错误通知。错误会中断这个可观察对象实例的执行过程。 |
complete | 可选。用来处理执行完毕(complete)通知。当执行完毕后,这些值就会继续传给下一个处理器。 |
观察者对象可以定义这三种处理器的任意组合。如果你不为某种通知类型提供处理器,这个观察者就会忽略相应类型的通知。
订阅
只有当有人订阅 Observable
的实例时,它才会开始发布值。 订阅时要先调用该实例的 subscribe()
方法,并把一个观察者对象传给它,用来接收通知。
为了展示订阅的原理,我们需要创建新的可观察对象。它有一个构造函数可以用来创建新实例,但是为了更简明,也可以使用 Observable
上定义的一些静态方法来创建一些常用的简单可观察对象:
of(...items)
—— 返回一个Observable
实例,它用同步的方式把参数中提供的这些值发送出来。from(iterable)
—— 把它的参数转换成一个Observable
实例。 该方法通常用于把一个数组转换成一个(发送多个值的)可观察对象。
下面的例子会创建并订阅一个简单的可观察对象,它的观察者会把接收到的消息记录到控制台中:
// Create simple observable that emits three values
const myObservable = of(1, 2, 3);
// Create observer object
const myObserver = {
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'),
};
// Execute with the observer object
myObservable.subscribe(myObserver);
// Logs:
// Observer got a next value: 1
// Observer got a next value: 2
// Observer got a next value: 3
// Observer got a complete notification
遇到的问题:
收获:
明日计划:
评论