詳解Angular中的Observable（可觀察對象）

這篇文章帶大家了解一下Angular 可觀察物件(Observable)。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

相關教學推薦：《angular教學》

可觀察物件(Observable)

可觀察物件支援在應用程式的發布者和訂閱者之間傳遞訊息。

可觀察物件是聲明式的 —— 即定義的用於發佈值的函數，在有消費者訂閱它之前，這個函數不會實際執行。

---

可觀察物件可能會發出的三種通知：

##說明#next必要。用來處理每個送達值。在開始執行後可能執行零次或多次。 error可選。用來處理錯誤通知。錯誤會中斷這個可觀察物件實例的執行過程。 complete可選。用來處理執行完畢（complete）通知。執行完畢後，這些值就會繼續傳給下一個處理器。

#通知類型

---

定義觀察者

觀察者(observer)： 用於接收可觀察物件通知的處理器要實作Observer 接口，這個物件定義了一些回呼函數來處理可觀察物件可能會發出的三種通知。 觀察者物件可以定義這三種處理器的任意組合。如果你不為某種通知類型提供處理器，這個觀察者就會忽略對應類型的通知。

// Create observer object
const myObserver = {
  next: (_data) => {
  	// next通知类型处理器
  },
  error: err => {
  	// error通知类型处理器
  },
  complete: () => console.log('Observer got a complete notification'),
};

訂閱

只有當Observable的實例被訂閱時，Observable實例才會發佈值。訂閱時要先呼叫該實例的

subscribe() 方法，並把一個觀察者物件傳給它，用來接收通知。

語法：Observable.subscribe(ObserverObject)，其中，Observable為可觀察物件實例，ObserverObject為觀察者物件。

// 官网示例
// Create simple observable that emits three values
const myObservable = of(1, 2, 3);

// Create observer object
const myObserver = {
  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'),
};

// Execute with the observer object
myObservable.subscribe(myObserver);
// Logs:
// Observer got a next value: 1
// Observer got a next value: 2
// Observer got a next value: 3
// Observer got a complete notification

另外，subscribe() 方法還可以接收定義在同一行中的回呼函數，無論 next、error 或 complete 處理器。例如，下面的 subscribe() 呼叫和前面指定預定義觀察者的例子是等價的。

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

註： 無論哪種情況，next通知類型的處理器是必要的，而error和complete處理器是可選的。

subscribe() 呼叫會傳回一個

Subscription 物件，該物件具有一個 unsubscribe()方法。當呼叫該方法時，你就會停止接收通知。

更多程式相關知識，請造訪：

程式設計影片！ ！

以上是詳解Angular中的Observable（可觀察對象）的詳細內容。更多資訊請關注PHP中文網其他相關文章！