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

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
複製代碼