快捷導(dǎo)航

詳解Angular2中的編程對(duì)象Observable

更新時(shí)間：2016年09月17日 09:07:54 投稿：daisy

大家都是在Reactive Extensions for Javascript誕生于幾年前，隨著angular2正式版的發(fā)布，它將會(huì)被更多開發(fā)者所認(rèn)知。這篇文章我們來(lái)詳細(xì)介紹RxJs提供的Observable對(duì)象，有需要的朋友們可以參考借鑒。

前言

RxJs提供的核心是Observable對(duì)象，它是一個(gè)使用可觀察數(shù)據(jù)序列實(shí)現(xiàn)組合異步和事件編程。
跟這個(gè)很類似的異步編程模型是Promise，Promise是基于狀態(tài)變化的異步模型，一旦由等待狀態(tài)進(jìn)入成功或失敗狀態(tài)便不能再次修改，當(dāng)狀態(tài)變化時(shí)訂閱者只能夠拿到一個(gè)值；而Observable是基于序列的異步編程模型，隨著序列的變化，訂閱者可以持續(xù)不斷的獲取新的值。而且Promise只提供回話機(jī)制，并沒有更多的操作來(lái)支持對(duì)結(jié)果的復(fù)雜處理，而Observable提供了多種多樣的操作符，來(lái)處理運(yùn)算結(jié)果，以滿足復(fù)雜的應(yīng)用邏輯。

在實(shí)際編程中，我們主要與三個(gè)對(duì)象打交道：Observable、observer、Subscription：

以一個(gè)元素的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);

如果每個(gè)事件都需要這么包裝一下，豈不是太麻煩了，所以RxJs為我們提供了一個(gè)便利函數(shù)：Observable.fromEvent來(lái)方便的銜接事件。

常見的鏈接操作符：concat、merge、combineLates等

投影操作：map、flatMap，flatMap需要重點(diǎn)介紹

過濾：filter、distinctUltilChanges、

操作符分類：Operators by Categories

錯(cuò)誤處理：catch、retry、finally

減壓：debounce、throttle、sample、pausable

減少：buffer、bufferWithCount、bufferWithTime

想要掌握Observable的操作符先要學(xué)會(huì)看懂序列圖：

箭頭代表著隨時(shí)間變化的序列，比如在一個(gè)元素上不斷點(diǎn)擊鼠標(biāo)，圓圈代表序列對(duì)外產(chǎn)生的影響，如每一次點(diǎn)擊元素都會(huì)觸發(fā)一次事件回調(diào)，圓圈中的數(shù)字是對(duì)外發(fā)射的信息，如每一次事件的觸發(fā)都會(huì)有一個(gè)事件對(duì)象，代表本次操作的一些信息。

想要靈活的運(yùn)用Observable處理復(fù)雜的邏輯，就要學(xué)會(huì)使用它提供的操作符。我將操作符分為兩類，單序列操作和復(fù)合序列操作，單序列操作是指的針對(duì)一個(gè)序列進(jìn)行的操作運(yùn)算，復(fù)合序列操作指的是對(duì)兩個(gè)或者多個(gè)序列進(jìn)行處理的操作符，復(fù)合序列操作相對(duì)更難懂一些。

下面先看單序列操作，以map操作為例：

map操作是將一個(gè)序列中每次對(duì)外發(fā)射的信息做轉(zhuǎn)換，如上圖map將每次的發(fā)射值乘以十，那么當(dāng)訂閱者訂閱之后每次得到的訂閱值就不再是原始的123而是經(jīng)過轉(zhuǎn)換后的10 20 30。通過序列圖能更方便的理解Observable的運(yùn)算。

下面我們來(lái)看一個(gè)復(fù)合序列操作，以merge為例

merge操作的目的是將兩個(gè)獨(dú)立序列，合成一個(gè)序列。原本序列1隨著時(shí)間的前進(jìn)，在100ms時(shí)發(fā)射a，在200ms時(shí)發(fā)射b，300ms時(shí)發(fā)射c，它的訂閱者在400ms將受到abc三個(gè)值；序列2在150ms時(shí)發(fā)射d，250ms時(shí)發(fā)射e，350ms時(shí)發(fā)射f，它的訂閱者在400ms內(nèi)收到def三個(gè)值。而merge之后的新序列將在400ms內(nèi)收到abcdef（注意順序）。

常用操作符的理解：

Observable.range：發(fā)射一定數(shù)量值得序列。

Observable.toArray: 在序列完成時(shí)將所有發(fā)射值轉(zhuǎn)換為一個(gè)數(shù)組。

Observable.flatMap: 將原始序列流中的元素轉(zhuǎn)化為一個(gè)新的序列流，并將這個(gè)新的序列流merge到原來(lái)的序列中元素的位置。

Observable.startWith: 它會(huì)設(shè)置Observable序列的第一個(gè)值

Observable.combineLatest: 類似于promiseAll，在所有序列有結(jié)果后才會(huì)執(zhí)行

Observable.scan: 將序列中每次發(fā)射的值可以做聚合，與reduce類似，reduce會(huì)將整個(gè)序列的值聚合起來(lái)，在序列完成時(shí)發(fā)送一個(gè)最終值

Observable.sample: 從持續(xù)的序列中取得一定的樣品

Observable.merge：將多個(gè)序列合并成一個(gè)，可以做OR來(lái)使用

Observable.timestamp: 能夠得到每個(gè)發(fā)射值的發(fā)射時(shí)的時(shí)間

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

Observable.takeWhile() 當(dāng)參數(shù)為false時(shí)停止發(fā)射數(shù)據(jù)