本篇文章帶大家了解一下Angular 可觀察對(duì)象(Observable)。有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對(duì)大家有所幫助。
相關(guān)教程推薦:《angular教程》
可觀察對(duì)象(Observable)
可觀察對(duì)象支持在應(yīng)用的發(fā)布者和訂閱者之間傳遞消息。
可觀察對(duì)象是聲明式的 —— 即定義的用于發(fā)布值的函數(shù),在有消費(fèi)者訂閱它之前,這個(gè)函數(shù)不會(huì)實(shí)際執(zhí)行。
可觀察對(duì)象可能會(huì)發(fā)出的三種通知:
通知類型 | 說(shuō)明 |
---|---|
next | 必要。用來(lái)處理每個(gè)送達(dá)值。在開(kāi)始執(zhí)行后可能執(zhí)行零次或多次。 |
error | 可選。用來(lái)處理錯(cuò)誤通知。錯(cuò)誤會(huì)中斷這個(gè)可觀察對(duì)象實(shí)例的執(zhí)行過(guò)程。 |
complete | 可選。用來(lái)處理執(zhí)行完畢(complete)通知。當(dāng)執(zhí)行完畢后,這些值就會(huì)繼續(xù)傳給下一個(gè)處理器。 |
定義觀察者
觀察者(observer): 用于接收可觀察對(duì)象通知的處理器要實(shí)現(xiàn) Observer 接口,這個(gè)對(duì)象定義了一些回調(diào)函數(shù)來(lái)處理可觀察對(duì)象可能會(huì)發(fā)來(lái)的三種通知。
觀察者對(duì)象可以定義這三種處理器的任意組合。如果你不為某種通知類型提供處理器,這個(gè)觀察者就會(huì)忽略相應(yīng)類型的通知。
// Create observer object const myObserver = { next: (_data) => { // next通知類型處理器 }, error: err => { // error通知類型處理器 }, complete: () => console.log('Observer got a complete notification'), };
訂閱
只有當(dāng)Observable的實(shí)例被訂閱時(shí),Observable實(shí)例才會(huì)發(fā)布值。訂閱時(shí)要先調(diào)用該實(shí)例的subscribe() 方法,并把一個(gè)觀察者對(duì)象傳給它,用來(lái)接收通知。
語(yǔ)法:Observable.subscribe(ObserverObject)
,其中,Observable為可觀察對(duì)象實(shí)例,ObserverObject為觀察者對(duì)象。
// 官網(wǎng)示例 // 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() 方法還可以接收定義在同一行中的回調(diào)函數(shù),無(wú)論 next、error 還是 complete 處理器。比如,下面的 subscribe() 調(diào)用和前面指定預(yù)定義觀察者的例子是等價(jià)的。
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') );
注: 無(wú)論哪種情況,next通知類型的處理器是必要的,而error和complete處理器是可選的。
subscribe() 調(diào)用會(huì)返回一個(gè) Subscription 對(duì)象,該對(duì)象具有一個(gè) unsubscribe()
方法。 當(dāng)調(diào)用該方法時(shí),你就會(huì)停止接收通知。