rxjs 是一个异步基于事件的编程模型
其优点:无状态(状态封装在内部),没有嵌套回调
var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
.throttleTime(1000)
.scan(count => count + 1, 0)
.subscribe(count => console.log(`Clicked ${count} times`));
主要类
Observable (可观察对象): represents the idea of an invokable collection of future values or events.
Observer(观察着): is a collection of callbacks that knows how to listen to values delivered by the Observable.
Subscription (观察者观察可观察对象产生的的订阅对象): represents the execution of an Observable, is primarily useful for cancelling the execution.
Operators (操作符): are pure functions that enable a functional programming style of dealing with collections with operations like map, filter, concat, flatMap, etc.
Subject (主题对象): is the equivalent to an EventEmitter, and the only way of multicasting a value or event to multiple Observers.
Schedulers (调度器): are centralized dispatchers to control concurrency, allowing us to coordinate when computation happens on e.g. setTimeout or requestAnimationFrame or others.
Observable
类似于调用方法,但是与方法相比,他可以返回多个值
Core Observable concerns:
- Creating Observables
- Subscribing to Observables
- Executing the Observable
- Disposing Observables
创建
传入带有observer参数的方法
var observable = Rx.Observable.create(function (observer) {
observer.next(1);
observer.next(2);
observer.next(3);
setTimeout(() => {
observer.next(4);
observer.complete();
}, 1000);
});
订阅
observable.subscribe(x => console.log(x));
Subscribing to an Observable is like calling a function, providing callbacks where the data will be delivered to.
执行:
There are three types of values an Observable Execution can deliver:
- “Next” notification: 发送一个值
- “Error” notification: 发送js异常或错误
- “Complete” notification: 发送事件流中止通知
var observable = Rx.Observable.create(function subscribe(observer) {
try {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
} catch (err) {
observer.error(err); // delivers an error if it caught one
}
});
停止:
Subscription 对象停止事件流
var observable = Rx.Observable.create(function subscribe(observer) {
// Keep track of the interval resource
var intervalID = setInterval(() => {
observer.next('hi');
}, 1000);
// Provide a way of canceling and disposing the interval resource
return function unsubscribe() {
clearInterval(intervalID);
};
});
var subscription = observable.subscribe(x => console.log(x));
// Later:
subscription.unsubscribe();
Observer
Observables 消费者
和Observables三种通知类型一一对应
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'),
};
Subject
同时是Observable和Observer子类,可以广播事件流 (发布监听模式)
var subject = new Rx.Subject();
subject.subscribe({
next: (v) => console.log('observerA: ' + v)
});
subject.subscribe({
next: (v) => console.log('observerB: ' + v)
});
subject.next(1);
subject.next(2);
result:
observerA: 1
observerB: 1
observerA: 2
observerB: 2
Operator
Scheduler
控制订阅何时开始,通知如何发送
同步发送转异步发送:
var observable = Rx.Observable.create(function (observer) {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
})
.observeOn(Rx.Scheduler.async);
console.log('just before subscribe');
observable.subscribe({
next: x => console.log('got value ' + x),
error: err => console.error('something wrong occurred: ' + err),
complete: () => console.log('done'),
});
console.log('just after subscribe');
result:
just before subscribe
just after subscribe
got value 1
got value 2
got value 3
done