Angular2學習筆記——Observable

　　Reactive Extensions for Javascript 誕生於幾年前，隨着angular2正式版的發佈，它將會被更多開發者所認知。RxJs提供的核心是Observable對象，它是一個使用可觀察數據序列實現組合異步和事件編程。

跟這個很相似的異步編程模型是Promise，Promise是基於狀態變化的異步模型，一旦由等待狀態進入成功或失敗狀態便不能再次修改，當狀態變化時訂閱者只可以拿到一個值；而Observable是基於序列的異步編程模型，隨着序列的變化，訂閱者能夠持續不斷的獲取新的值。並且Promise只提供回話機制，並無更多的操做來支持對結果的複雜處理，而Observable提供了多種多樣的操做符，來處理運算結果，以知足複雜的應用邏輯。

 

　　

在實際編程中，咱們主要與三個對象打交道：Observable、observer、Subscription：

 

　　以一個元素的click事件爲例看看如何使用Observable：

var clickStream = new Rx.Observable(observer => {
var handle = evt => observer.next(evt);
element.addEventListener('click', handle);

return () => element.removeEventListener('click', handle);
});

subscription = clickStream.subscribe(evt => {
console.log('onNext: ' + evt.id);
}, err => {
console.error('onError');
}, () => {
console.log('onComplete');
});

setTimeout(() => {
subscription.unsubscribe();
}, 1000);

　　若是每一個事件都須要這麼包裝一下，豈不是太麻煩了，因此RxJs爲咱們提供了一個便利函數：Observable.fromEvent來方便的銜接事件。

　　常見的連接操做符：concat、merge、combineLates等

　　投影操做：map、flatMap，flatMap須要重點介紹

　　過濾：filter、distinctUltilChanges、

　　操做符分類： Operators by Categories

　　錯誤處理：catch、retry、finally

　　減壓：debounce、throttle、sample、pausable

　　減小：buffer、bufferWithCount、bufferWithTime

 

　　

　　想要掌握Observable的操做符先要學會看懂序列圖：

　　箭頭表明着隨時間變化的序列，好比在一個元素上不斷點擊鼠標，圓圈表明序列對外產生的影響，如每一次點擊元素都會觸發一次事件回調，圓圈中的數字是對外發射的信息，如每一次事件的觸發都會有一個事件對象，表明本次操做的一些信息。

想要靈活的運用Observable處理複雜的邏輯，就要學會使用它提供的操做符。我將操做符分爲兩類，單序列操做和複合序列操做，單序列操做是指的針對一個序列進行的操做運算，複合序列操做指的是對兩個或者多個序列進行處理的操做符，複合序列操做相對更難懂一些。

下面先看單序列操做，以map操做爲例：

　　map操做是將一個序列中每次對外發射的信息作轉換，如上圖map將每次的發射值乘以十，那麼當訂閱者訂閱以後每次獲得的訂閱值就再也不是原始的123而是通過轉換後的10 20 30。經過序列圖能更方便的理解Observable的運算。

下面咱們來看一個複合序列操做，以merge爲例

　　merge操做的目的是將兩個獨立序列，合成一個序列。本來序列1隨着時間的前進，在100ms時發射a，在200ms時發射b，300ms時發射c，它的訂閱者在400ms將受到abc三個值；序列2在150ms時發射d，250ms時發射e，350ms時發射f，它的訂閱者在400ms內收到def三個值。而merge以後的新序列將在400ms內收到abcdef（注意順序）。

 

　　經常使用操做符的理解：

Observable.range：發射必定數量值得序列。

Observable.toArray: 在序列完成時將全部發射值轉換爲一個數組。

Observable.flatMap: 將原始序列流中的元素轉化爲一個新的序列流，並將這個新的序列流merge到原來的序列中元素的位置。

Observable.startWith: 它會設置Observable序列的第一個值

Observable.combineLatest: 相似於promiseAll，在全部序列有結果後纔會執行

Observable.scan: 將序列中每次發射的值能夠作聚合，與reduce相似，reduce會將整個序列的值聚合起來，在序列完成時發送一個最終值

Observable.sample: 從持續的序列中取得必定的樣品

Observable.merge：將多個序列合併成一個，能夠作OR來使用

Observable.timestamp: 可以獲得每一個發射值的發射時的時間

Observable.distinctUntilChanged(compare, selector): selector取出用來比較的key，compare用來比較兩個key

Observable.takeWhile() 當參數爲false時中止發射數據