Angular學習筆記—RxJS與Observable（轉載）

1. Observable與觀察者模式的關係

其實這裏講的Observable就是一種觀察者模式，只不過RxJS把Observable結合了迭代模式以及附件了不少的operator，讓他變得很強大，也增添了一些神祕的色彩。

那麼設計模式中的觀察者模式，實際上是很是簡單的，能夠用生活中的訂牛奶的示例來講明，

你訂閱了某訂奶機構的牛奶，那麼付了錢以後，在預約的時間內都會給你送牛奶，若是你取消訂閱，那麼次日就收不到新鮮的牛奶了。

其實，觀察者模式的模型在生活中不少，忽然想到訂牛奶，是由於我前段時間訂牛奶，要裝奶箱，訂奶機構的工做人員省事到直接用兩根鐵絲綁了門上了，結果次日我就被小區物業說了，我給他發完短信，一怒之下想給客服打電話投訴他，結果裝奶箱的可愛人給我發了一條短信：

對不起啊，我明天給你重裝，不要給客服打電話，他們會扣個人毛爺爺的。

因而乎，我就放下了電話，只能說你們賺錢都不容易。

閒話莫談，下面經過具體的實現來一塊兒理解相應的概念。

 

2. Observable的具體實現

咱們先看一下若是去使用Observable，下面一段代碼是RxJS官網中的例子。 

 

 運行結果：

咱們一塊兒來分析一下上面的例子，並把理解的重點之處指出來。 

2.1 Observable是一個函數

首先經過RxJS建立一個Observable的實例，Observable解釋爲被觀察者。

var observable = Rx.Observable.create(function(observer){}

重點：Observable理解爲一個函數，這很重要

這樣在下面的每次訂閱中就能夠知道爲何是從頭執行，由於一個函數調用都是從頭開始執行的。

這就和咱們普通理解到的報紙訂閱不太同樣了。

報紙訂閱：若是你今天訂了報紙，那麼明天只會收到明天以及明天之後的報紙，以前的報紙是不會收到的。

Observable：至關於你今天訂了報紙，那麼明天會收到報紙機構從第一天發報到明天的全部的報紙。

2.2 訂閱的過程

怎麼訂閱的呢？

是經過Observable的subscribe函數進行訂閱的，subscribe函數的函數體就是剛纔的Observable的函數體，那麼subscribe的參數就是訂閱者，也叫觀察者observer。

代碼中是一個觀察者observer1去訂閱了此Observable對象observable。

那麼只要觀察者訂閱服務就立刻執行Observable的函數體。 

觀察者實現過程：

首先觀察者是一個對象，包含三個回調函數。

next：表示一個接一個的任務。

error：表示Observable對象執行流程出錯了，訂閱會當即結束。

complete：表示訂閱過程完成了。

因此Observable對象的函數體內執行的任務其實就是在調用觀察者的next以及complete回調函數。

當Observable對象的函數體執行出錯時，會調用觀察者的error回調函數。

不管哪一種狀況，next 處理器都是必要的，而 error 和 complete 處理器是可選的。

2.3 取消訂閱

那麼如何去取消訂閱呢？

在解決此問題以前，先列出一個對象subscription，它是幹嗎的呢？

subscription是用來描述觀察者和被觀察者的訂閱關係。

var subscription1 = observable.subscribe(observer1); 

取消訂閱就很簡單，直接採用：

 subscription1.unsubscribe();

2.4 多人訂閱

能夠進行多個觀察者訂閱。

像下面的例子，再建立一個observer2的對象，執行下面的操做，observer2就訂閱了此服務，那麼observer2的執行過程和observer1是沒有任何關係的。

注意：並非共享訂閱的Observable對象。

observable.subscribe(observer2);

 observer2訂閱：

 

3. 總結概念

如今總結一下，涉及到的名字，咱們以家裏訂牛奶爲例來進一步說明。

3.1 Observable

被觀察者，至關於送奶機構。

實現上是一個函數對象，誰訂閱了，就執行此函數的函數體。

3.2 Observer

觀察者，至關於某一個訂牛奶的個體。

實現上是一個對象，裏面註冊了三個回調函數，分別是next、error、complete。

Observable的函數體會執行Observer的回調函數。

3.3 subscribe

Observable和Observer怎麼創建關係？送奶機構怎麼知道給誰送牛奶？

經過subscribe函數，這樣observer就和observable創建了觀察和被觀察的關係了。

3.4 subscription

Observable和Observer之間的關係，誰去維護呢？訂閱牛奶的訂單誰去管呢？

那麼就是subscription來管理Observable和Observer之間的關係。

3.5 unsubscribe

unsubscribe解除Observable和Observer之間關係，牛奶再也不送了。

3.6 中斷的概念

Observable的函數體若是出錯或complete，那麼函數體就會中止執行，再有next也不會執行，若是函數體是下面代碼這樣執行的，由於setTimeout裏面的next(那麼observer.next(4)是不會執行的。 

 

最後用一句話總結一下：

Observable的好處在於模型簡單、過程有多個輸出、中間能夠中斷和RxJS提供的強大的operators。

 

 

轉載自：

RxJS的Observable概念詳解