Rxjs創建數據流

前言

Rxjs是使用Observable實現響應時編程的庫，它使js在處理異步或回調邏輯時更優雅簡便。本文是學習的Rxjs的筆記記錄。

創建類操作符

在使用Rxjs時，可以使用new 關鍵詞來定製Observale構造函數。但是在響應式編程領域有固定的模式，Observable對象的創建也有固定的若干種模式，根據這些可以重複利用的創建模式，有了創建類操作符。

同步數據流

在rxjs世界中，rxjs的一切操作都是在處理數據流。

• create
  Create是最簡單的創建操作符，就是直接調用Observable的構造函數創建數據流。

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

• of
  使用Of這個操作符可以輕鬆創建指定數據集合的Observable對象。

import { of } from 'rxjs/observable/of'; 
const source$ = of(1, 2, 3);

• range
  創建一個範圍的連續的序列。

const source$ = Observable.range(1, 100); 

Range第1個參數是數字序列開始的數字，第2個參數是數字序列的長
度，產生的Observable對象先產生數字1，每次遞增1，依次產生100個數
字，然後完結。

• generate
  創建循環序列。

const source$ = Observable.generate( 
	2,
	value => value < 10, 
	value => value + 2,
	value => value * value 
);

• repeate
  創建重複的數據流。

const source$ = Observable.of(1, 2, 3); 
const repeated$= source$.repeat(10);

source產生的Observable對象會產生1、2、3三個數 據，這個Observable對象是repeated的上游，利用repeat這個操作符， repeated會重複source中的內容10遍，共產生30個數據之後才完結。

異步數據流

Rxjs的最大特點就是處理異步操作。

• interval和timer

import 'rxjs/add/observable/interval'; 
const source$ = Observable.interval(1000); 
import 'rxjs/add/observable/timer'; 
const source$ = Observable.timer(1000); 

interval接受1個數值類型的參數，代表產生數據的間隔毫秒數，返回
的Observable對象就按照這個時間間隔輸出遞增的整數序列，從0開始。

• from
  把一切轉化爲observable。

import 'rxjs/add/observable/from'; 
const source$ = Observable.from([1, 2, 3]);

• fromPromise
  如果from的參數是Promise對象，那麼這個Promise成功結束，from產生
  的Observable對象就會吐出Promise成功的結果，並且立刻結束。

const promise = Promise.resolve('good'); 
const source$ = Observable.from(promise); 
source$.subscribe( 
	console.log, 
	error => console.log('catch', error), 
	() => console.log('complete') 
);

• fromEvent
  fromEvent最常見的用法就是 把DOM中的事件轉化爲Observable對象中的數據。

const event$ = Rx.Observable.fromEvent(document.querySelector('#app'), 'click'); 
	event$.subscribe( 
	() => { 
	document.querySelector('#text').innerText = ‘ceshi’
	} 
);

• fromEventPattern
  fromEventPattern接受兩個函數參數，分別對應產生的Observable對象
  被訂閱和退訂時的動作，因爲這兩個參數是函數，具體的動作可以任意定
  義，所以可以非常靈活。

import {Observable} from 'rxjs/Observable'; 
import EventEmitter from 'events'; 
import 'rxjs/add/observable/fromEventPattern'; 
const emitter = new EventEmitter(); 
const addHandler = (handler) => { 
	emitter.addListener('msg', handler); 
};
const removeHandler = (handler) => { 
	emitter.removeListener('msg', handler); 
}
const source$ = Observable.fromEventPattern(addHandler, removeHandler); 
const subscription = source$.subscribe( 
	console.log, 
	error => console.log('catch', error), 
	() => console.log('complete') 
);
emitter.emit('msg', 'hello'); 
emitter.emit('msg', 'world'); 
subscription.unsubscribe(); 
emitter.emit('msg', 'end'); 

總結

對於同步數據流，關心的只是產生什麼樣的數據，已經產生數據的順序關係，數據之間沒有時間間隔，所 以不需要考慮異步的情況。對於異步數據流，除了要考慮產生什麼樣的數 據，還要考慮產生數據之間的間隔，也就是產生數據的節奏。