RxJS - 可觀察物件 (Observables)

可觀察物件是一個函式，它建立一個觀察者並將觀察者附加到預期值來源的地方，例如DOM元素的點選、滑鼠事件或HTTP請求等。

觀察者是一個包含回撥函式的物件，當與可觀察物件互動時，它將被呼叫，即，例如按鈕點選、HTTP請求等來源已互動。

本章我們將討論以下主題：

建立可觀察物件
訂閱可觀察物件
執行可觀察物件

建立可觀察物件

可觀察物件可以使用可觀察物件建構函式建立，也可以使用 `Observable.create()` 方法建立，並將訂閱函式作為引數傳遞給它，如下所示：

testrx.js

import { Observable } from 'rxjs';

var observable = new Observable(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);

我們建立了一個可觀察物件，並使用可觀察物件內部的 `subscriber.next` 方法添加了訊息“我的第一個可觀察物件”。

我們也可以使用 `Observable.create()` 方法建立可觀察物件，如下所示：

testrx.js

import { Observable } from 'rxjs';
var observer = Observable.create(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);

訂閱可觀察物件

您可以如下訂閱可觀察物件：

testrx.js

import { Observable } from 'rxjs';

var observer = new Observable(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);
observer.subscribe(x => console.log(x));

當觀察者被訂閱時，它將開始執行可觀察物件。

這是我們在瀏覽器控制檯中看到的：

執行可觀察物件

可觀察物件在其被訂閱時執行。觀察者是一個具有三個方法的物件，這些方法會收到通知：

next() - 此方法將傳送值，例如數字、字串、物件等。

complete() - 此方法不會發送任何值，並指示可觀察物件已完成。

error() - 此方法將傳送任何錯誤。

讓我們建立一個包含所有三個通知的可觀察物件並執行它。

testrx.js

import { Observable } from 'rxjs';
var observer = new Observable(
   function subscribe(subscriber) {
      try {
         subscriber.next("My First Observable");
         subscriber.next("Testing Observable");
         subscriber.complete();
      } catch(e){
         subscriber.error(e);
      }
   }
);
observer.subscribe(x => console.log(x), (e)=>console.log(e), 
   ()=>console.log("Observable is complete"));

在上面的程式碼中，我們添加了 `next`、`complete` 和 `error` 方法。

try{
   subscriber.next("My First Observable");
   subscriber.next("Testing Observable");
   subscriber.complete();
} catch(e){
   subscriber.error(e);
}

要執行 `next`、`complete` 和 `error`，我們必須呼叫訂閱方法，如下所示：

observer.subscribe(x => console.log(x), (e)=>console.log(e), 
   ()=>console.log("Observable is complete"));

只有在發生錯誤時才會呼叫 `error` 方法。

這是在瀏覽器中看到的輸出：

列印頁面