RxJS 核心概念Observer & Subscription

Observer（觀察者）

什麼是Observer？ Observer（觀察者）是Observable（可觀察對象）推送數據的消費者。在RxJS中，Observer是一個由回調函數組成的對象，鍵名分別爲next、error 和 complete，以此接受Observable推送的不一樣類型的通知，下面的代碼段是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邏輯，只需在subscribe（訂閱）Observable後將Observer傳入：

observable.subscribe(observer);

在RxJS中，Observer是可選的。在next、error 和 complete處理邏輯部分缺失的狀況下，Observable仍然能正常運行，爲包含的特定通知類型的處理邏輯會被自動忽略。

下面例子中Observer並不包含complete類型通知的處理邏輯：

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

在RxJS內部，調用observable.subscribe時，它會建立一個只有next處理邏輯的Observer。固然你也能夠將next、error 和 complete的回調函數分別傳入：

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

什麼是Subscription？ Subscription是一個表明能夠終止資源的對象，表示一個Observable的執行過程。Subscription有一個重要的方法：unsubscribe。這個方法不須要傳入參數，調用後便會終止相應的資源。在RxJS之前的版本中，Subscription被稱爲"Disposable"。

var observable = Rx.Observable.interval(1000);
var subscription = observable.subscribe(x => console.log(x));

subscription.unsubscribe();

Subscription可以經過unsubscribe() 函數終止Observable的執行過程並釋放相應資源。

Subscription能夠嵌套使用：你能夠調用一個Subscription的unsubscribe() 方法來取消一系列嵌套的Subscription。經過add方法，即可以實現Subscription的嵌套：

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(() => {
  // 終止全部嵌套的Subscription
  subscription.unsubscribe();
}, 1000);

執行後，控制檯會輸出一下結果：

second: 0
first: 0
second: 1
first: 1
second: 2

此外，Subscription提供了remove(otherSubscription)方法，能夠刪除一個Subscription嵌套的子Subscription。