RxJS的學習之路三（建立一個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
複製程式碼