在RxJS中,一個數據流的完整流向至少需要包含Observable和Observer。Observable是被觀察者,Observer是觀察者,Observer訂閱Observable,Observable向Observer推送數據以完成整個過程。
可以說一個完整的RxJS數據流就是Observable和Observer之間的互動遊戲。
Observable實現了下面兩種設計模式:
觀察者模式
迭代器模式
由於不是寫設計模式的文章,所以一筆帶過,感興趣的可以自己看下相關的書,需要一提的是,任何一種設計模式,指的都是解決某個特定類型問題的方法。問題複雜多變,往往不是靠單獨一種設計模式能夠解決的,更需要多種設計模式的組合,而RxJS的Observable就是觀察者模式和迭代器模式的組合。
Observale與Observer的互動
訂閱
首先我們先創建一個Observable,作爲數據源
const { Observable } = rxjs; const sourceObservable$ = new Observable(observer => {
observer.next('hello');
observer.next('rxjs');
});
然後再設置一個observer,作爲訂閱者
const Observer = { next: res => console.log(res)
};
最後Observer訂閱Observable,數據開始流動
sourceObservable$.subscribe(Observer); // hello
// rxjs
一個非常簡單的數據流就完成了。
狀態流轉
在上面的例子中,只有next這一種狀態,不斷地往下游傳遞數據,但實際上,數據流在流動過程中有三種狀態:
next,正常流轉到下一個狀態
error,捕獲到異常,流動中止
complete,數據流已經完成,流動終止
接下來改一下上面的代碼,補上另外兩種狀態
const sourceObservable$ = new Observable(observer => {
observer.next('hello');
observer.error('the data is wrong!');
observer.next('rxjs');
observer.complete();
}); const Observer = { next: res => console.log(res), error: err => console.log(err), complete: () => console.log('complete!')
}
sourceObservable$.subscribe(Observer); // hello
// the data is wrong!
現在再看Observer是不是有種似曾相識的感覺?沒錯,Observer其實就是一個迭代器了。
至此,不難發現,Observable與Observer的互動過程其實就是,Observer通過觀察者模式向Observable注入了一個迭代器,通過next遊標控制數據源Observable的數據流動,並根據實際流動過程中可能發生的情況將狀態流轉到error或者complete。
取消訂閱
現在Observable與Observer已經通過subscribe建立了聯繫,但有時候我們需要把這種聯繫斷開,比如組件銷燬的時候。這時候就需要取消訂閱了,看下面的例子
const sourceObservable$ = new Observable(observer => { let number = 1;
setInterval(() => {
observer.next(number++);
}, 1000);
}); const Observer = { next: res => console.log(res), error: err => console.log(err), complete: () => console.log('complete!')
} const subscription = sourceObservable$.subscribe(Observer);
setTimeout(() => { // 取消訂閱
subscription.unsubscribe();
}, 4000); // 1
// 2
// 3
// 4
需要注意的是,在本例子中,雖然取消訂閱了,但是作爲數據源的sourceObservable$並沒有終結,因爲始終沒有調用complete方法,只是Observer不再接收推送的數據了
爲了便於觀察其中的差異,我們將sourceObservable$改一下
const sourceObservable$ = new Observable(observer => { let number = 1;
setInterval(() => { console.log('subscribe:' + number);
observer.next(number++);
}, 1000);
}); // subscribe: 1
// 1
// subscribe: 2
// 2
// subscribe: 3
// 3
// subscribe: 4
// 4
// subscribe: 5
// subscribe: 6
// ...
Hot Observable和Cold Observable
假設我們有這樣一個場景,一個Observable被兩個ObserverA、ObserverB先後相隔N秒訂閱了,那麼ObserverB是否需要接收訂閱之前的數據呢?
其實沒有固定的答案,是否接收需要根據實際的業務場景來定,正是因爲如此,所以便有了Hot Observable以及Cold Observable。
Hot Observable:熱被觀察對象,類似於直播,看到的內容是從你打開直播的那一刻開始的,之前的內容已經錯過。只能接收訂閱那一刻開始的數據。
Cold Observable:冷被觀察對象,類似於錄播,看到的內容是你打開的視頻的第一秒種開始的。每次訂閱都會從頭開始接收數據
先看下Hot Observable,每次訂閱只推送當前的數據,所以不會在每次訂閱時重置數據推送,代碼如下:
// 先產生數據
let number = 1; const sourceObservale$ = new Observable(observer => { let num = number;
setInterval(() => {
observer.next(num++);
number = num;
}, 1000);
}); const ObserverA = ObserverB = { next: item => console.log(item), error: err => console.log(err), complete: () => console.log('complete!')
}
sourceObservale$.subscribe(ObserverA);
setTimeout(() => {
sourceObservale$.subscribe(ObserverB);
}, 2000); // 1 => A
// 2 => A
// 3 => A
// 3 => B
// 4 => A
// 4 => B
// ..
而對於Cold Observable,每次訂閱都是重頭開始推送,所以每一次訂閱都會重置數據推送,代碼如下:
const sourceObservale$ = new Observable(observer => { // 訂閱時產生數據
let number = 1;
setInterval(() => {
observer.next(number++);
}, 1000);
}); // 中間不變
... // 1 => A
// 2 => A
// 3 => A
// 1 => B
// 4 => A
// 2 => B
// ..
從這裏也可以看出,Observable是具有惰性求值的,只有在被訂閱的時候纔會執行內部邏輯,而Cold Observable則更進一步,在沒有被訂閱的時候,連數據都不會產生。
睿江雲官網鏈接:http://www.eflycloud.com/#register?salesID=6DGNUTUAV