RxJS的學習之路三（建立一個Observable）

elc發表於2019-03-18
JS

Observer和Observable是什麼

在RxJS中Observable是可以被訂閱（subscribe）的一個流物件，而observer是訂閱Observable的物件，理解這兩者的區別和聯絡是很重要的。

用RxJS官網上給的一個例子來說明

var Obsec = Rx.Observable.create(function (observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
});
observable.subscribe(
  value => console.log(value),
  err => {},
  () => console.log('this is the end')
);
複製程式碼

如上所示，用create的方式（建立Observable的一種方式）建立了一個Observable，這個Observable由observer(觀察者)的方法組成的流的順序步奏，從而構建了一個完成的Observable觀察者物件。

觀察者（observer）的方法有：

  • observer.next(value): 類似於promise的then，表示接下來的傳入或操作；
  • observer.complete(): 表示觀察者物件的流結束，complete()觸發後，next將不再起作用；
  • observer.error(): 當報錯是執行，並結束流；

以上三個方法放在流物件後面的subscribe函式中可以簡寫

ob.subscribe({
    next: d => console.log(d),
    error: err => console.error(err),
    complete: () => console.log('end of the stream')
})
複製程式碼

通常subscribe物件中僅傳入一個函式的時候視為next函式執行。

如何建立一個Observable

RxJS有很多的建立Observable的方法，基於這些方法，RxJS做到了萬物皆可流式操作。

最基礎的建立方式creat

和之前的例子一樣，create方法的建立和promise有點相似，next()函式中可以傳入任何東西，包括另外一個observable物件。

var observable = observable
	.create(function(observer) {
		observer.next('lina'); 
		observer.next('pom');
		observer.next('luna');
	})
複製程式碼

訂閱這個observable它會依次送出‘lina’,‘pom’,‘luna’，另外值得注意的一點是，這樣的建立是同步執行的，這樣就達到了rxjs可以同時處理同步和非同步行為的特性。

of

在實際專案中，我們往往可以直接引入操作符，就不用observable.的麻煩操作了

import { of } from 'rxjs';

of('lina', 'pom', 'luna').subscribe(res => console.log(res))
// lina
// pom
// luna
複製程式碼

of是一種建立observable的簡便方法

from

from是將陣列轉化為observable的方法

import { from } from 'rxjs';

const arr = ['lina', 'pom', 'luna'];
from(arr).subscribe(res => console.log(res));
// lina
// pom
// luna
複製程式碼

fromEvent

fromEvent可以將時間監聽轉化為流

import { from } from 'rxjs';

let eventListener = fromEvent(document.body, 'click');
eventListener.subscribe(() => console('click'))
複製程式碼

在點選頁面後會列印出‘click’。

interval, timer

interval建立一個每間隔指定時間發出一次事件的observable

import { interval } from 'rxjs';

interval(1000).subscribe(res => console.log(res))
    // 0
    // 1
    // 2
    // ...
複製程式碼

timer和interval相似，有兩個引數，第一個代表首個元素髮出的時間，第二個引數代表後面元素髮出的間隔時間。

 timer(1000, 5000).subscribe(res => console.log(res))
    //間隔一秒
    // 0
    //間隔5s
    // 1
    //間隔5s
    // 2
    // ...
複製程式碼

第一個引數還可以設定為Date，表示在指定的日期時間開始

empty，never, throw

來說幾個比較特殊的操作符.

  • empty建立一個空的observable，監聽即完成。

  • never建立一個永不結束的observable，永遠不會完成。

  • throw建立一個立即丟擲錯誤的observable，建立即報錯。

不過這些都沒有用到過。。。

退訂

想要讓observable物件中指，除了用以後會介紹到的操作符之外，還有一種辦法。

訂閱的subscribe（）是一個Subscription物件，該物件有一個unsubscribe方法可以滿足退訂的要求。

import { interval } from 'rxjs';

let subp = interval(1000).subscribe(res => console.log(res))
setTimeout(() => {
    subp.unsubscribe() // 停止訂閱
}, 4000);
    // 0
    // 1
    // 2
    // 3
複製程式碼

相關文章