Rxjs学习之观察者(Observer)与可观察对象(Observable)

什么是观察者?

1. 观察者是有Observable(可观察对象)发送值的消费者
2. 观察者只是一组回调函数的集合,每个回调函数对应一种Observable发送的通知类型:next,error,complete

什么是可观察对象?

• 可观察对象(Observable)是一个惰性推送集合,即:要调用Observable并看到这些值,需要订阅Observable:
  observable.subscribe({})

观察者(Observe)的使用
当我们简单的了解了 观察者(Observer) 和 可观察对象(Observable) 两个概念后我们再看看使用方法:

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'),
};

这里有一个回调函数的集合,想要使用观察者需要将它提供给Observable的 subscribe 方法:

observable.subscribe(observer);

这里我们提供了三个回调方法,当然我们也可以只提供部分回调函数数,只是某些通知类型会被忽略

var observer = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
};

也可能只提供一个回调函数作为参数:

observable.subscribe(x => console.log('Observer got a next value: ' + x));

在 observable.subscribe 内部,他会创建一个观察者对象并使用第一个回调函数作为 next 的处理方法.所有三种类型的回调函数都可以直接作为参数来提供：

observable.subscribe(
    x => console.log('Observable got a next value:'+x),
    err => console.error('Observer got an error: ' + err),
    () => console.log('Observer got a complete notification')
);

可观察对象(Observable)的使用

• 创建Observable

想使用 可观察对象(Observable) ,首先我们需要先创建

var observable = Rx.Observable.create(function (observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  setTimeout(() => {
    observer.next(4);
    observer.complete();
  }, 1000);
});

• 订阅Observable

要调用 Observable 并看到这些值，我们需要订阅 Observable：

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');

控制台执行结果:

just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done

• 执行Observable
  Observable 执行可以传递三种类型的值：

"Next" 通知： 发送一个值，比如数字、字符串、对象，等等。
"Error" 通知： 发送一个 JavaScript 错误 或 异常。
"Complete" 通知： 不再发送任何值。

下面是 Observable 执行的示例，它发送了三个 “Next” 通知，然后是 “Complete” 通知：

var observable = Rx.Observable.create(function subscribe(observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
});

Observable 严格遵守自身的规约，所以下面的代码不会发送 “Next” 通知 4：

var observable = Rx.Observable.create(function subscribe(observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
  observer.next(4); // 因为违反规约，所以不会发送
});

在 subscribe 中用 try/catch 代码块来包裹任意代码是个不错的主意，如果捕获到异常的话，会发送 “Error” 通知：

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); // 如果捕获到异常会发送一个错误
  }
});

• 清理Observable执行
  因为 Observable 执行可能会是无限的，并且观察者通常希望能在有限的时间内中止执行，所以我们需要一个 API 来取消执行。因为每个执行都是其对应观察者专属的，一旦观察者完成接收值，它必须要一种方法来停止执行，以避免浪费计算能力或内存资源。

当你订阅了 Observable，你会得到一个 Subscription ，它表示进行中的执行。只要调用 unsubscribe() 方法就可以取消执行。当我们使用 create() 方法创建 Observable 时，Observable 必须定义如何清理执行的资源。

function subscribe(observer) {
  var intervalID = setInterval(() => {
    observer.next('hi');
  }, 1000);

  return function unsubscribe() {
    clearInterval(intervalID);
  };
}

var unsubscribe = subscribe({next: (x) => console.log(x)});

// 稍后：
unsubscribe(); // 清理资源

参阅文档:http://cn.rx.js.org/manual/index.html