rxjs入門5之建立數據流

一 建立同步數據流

1.creat

Observable.create = function (subscribe) {
return new Observable(subscribe);
};

2.of:列舉數據

of(1,2,3).pipe(filter(curr=>curr>=2)).subscribe(console.log);
//2
//3

3.range:指定範圍

range(1,100).pipe(map(value=>value)).subscribe(console.log); //從1到100的全部正整數
//1
//2
//...
//3

4.generate:循環建立

generate相似⼀個for循環，設定⼀個初始值，每次遞增這個值，直到滿⾜某個條件的時候才中⽌循環，同時，循環體內能夠根據當前值產⽣數據。⽐如，想要產⽣⼀個⽐10⼩的全部偶數的平⽅。

const source$ = Observable.generate(
2, // 初始值，至關於for循環中的i=2
value => value < 10, //繼續的條件，至關於for中的條件判斷
value => value + 2, //每次值的遞增
value => value * value // 產⽣的結果
);

三個極簡的操做符：empty、never 和 throw

1.empty:empty就是產⽣⼀個直接完結的Observable對象，沒有參數，不產⽣任何數據，直接完結，下⾯是⽰例代碼：

const source$ = Observable.empty();

2.never:never產⽣的
Observable對象就真的是什麼都不作，既不吐出數據，也不完結，也不產⽣錯誤，就這樣待着，⼀直到永遠。

const source$ = Observable.never();

3.throwError:throwError產⽣的Observable對象也是什麼都不作，直接出錯，拋出的錯誤就是throw的參數，下⾯是使⽤throw的⽰例代碼：

const source$ = Observable.throwError(new Error('Oops'));

never、empty和throw單獨使⽤沒有意義，可是，在組合Observable對象時，若是須要這些特殊的Observable對象，這三個操做符能夠直接使⽤，例如，根據條件是否產⽣出錯的數據流如

const source$ = Observable.never();
$source.concat(shouldEndWell? Observable.empty() : Observable.throw(new Error()));

建立異步數據流

1.interval 和 timer

interval：interval接受⼀個數值類型的參數，表明產⽣數據的間隔毫秒數，返回的Observable對象就按照這個時間間隔輸出遞增的整數序列。

interval(1000).pipe(take(10),map(value=>value + 1)).subscribe(console.log);  //每隔1s返回 從2開始依次遞增,take(10)表明取10個數據值，到輸出10 結束

timer :timer(2000,1000)還⽀持第⼆個參數，若是使⽤第⼆個參數，那就會產⽣⼀個持續吐出數據的Observable對象，相似interval的數據流。第⼆個參數指定的是各數據之間的時間間隔，從被訂閱到產⽣第⼀個數據0的時間間隔，依然由第⼀個參數決定

const source$ = Observable.timer(2000, 1000);//source$被訂閱以後，2秒鐘的時刻吐出0，而後3秒鐘的時刻吐出1，4秒鐘的時刻吐出2……依次類推：

2.from :能夠把一切轉化爲Observable

from多是建立類操做符中包容性最強的⼀個了，由於它接受的參數只要「像」Observable就⾏，而後根據參數中的數據產⽣⼀個真正的Observable對象。
好比：數組，類數組，字符串，⼀個JavaScript中的generator也很像Observable，Promise 對象...

function * generateNumber(max) {
    for (let i=1; i<=max; ++i) {
        yield i;
    }
}
const source$ = Observable.from(generateNumber(3));

const promise = Promise.resolve('good');
from(promise).subscribe(
    console.log,
    error => console.log('catch', error),
    () => console.log('complete')
);
//結果：
//good
//complete

Promise對象雖然也⽀持異步操做，可是它只有⼀個結果，因此當Promise成功完成的時候，from也知道不會再有新的數據了，因此⽴刻完結了產⽣的Observable對象。當Promise對象以失敗⽽了結的時候，from產⽣的Observable對象也會⽴刻產⽣失敗事件

3.fromEvent

若是從事⽹頁開發，fromEvent是最可能會被⽤到的操做符，由於⽹頁應⽤老是要獲取⽤戶在⽹頁中的操做事件，⽽fromEvent最多見的⽤法就是把DOM中的事件轉化爲Observable對象中的數據.fromEvent的第⼀個參數是⼀個事件源，在瀏覽器中，最多見的事件源
就是特定的DOM元素，第⼆個參數是事件的名稱，對應DOM事件就是click、mousemove這樣的字符串.

<div>
<button id="clickMe">Click Me</button>
<div id="text">0</div>
</div>

let clickCount = 0;
fromEvent(document.querySelector('#clickMe'), 'click').subscribe(
    () => {
        document.querySelector('#text').innerText = ++clickCount
    }
);

4.ajax

詳情請見 ajax在項目中的封裝

defer

在建立之時並不會作分配資源的⼯做，只有當被訂閱的時候，纔會去建立真正佔⽤資源的Observable，以前產⽣的代理Observable會把全部⼯做都轉交給真正佔⽤資源的Observable。這種推遲佔⽤資源的⽅法是⼀個慣⽤的模式，在RxJS中，defer這個操做符實現的就是這種模式。

const observableFactory = () => Observable.of(1, 2, 3);
const source$ = Observable.defer(observableFactory);

const observableFactory = () => Observable.ajax(ajaxUrl);
const source$ = Observable.defer(observableFactory);