RxJS快速预览

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:

1. “Next” notification: 发送一个值
2. “Error” notification: 发送js异常或错误
3. “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

link

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