RxJS入門

RxJS是什麼？

前置知識點

• 響應式程式設計是使用非同步資料流進行程式設計。常見的非同步資料流包含Event buses。用包含這些事件在內的任何東西建立資料流（Data stream），監聽他並作出響應。
• 只關注業務邏輯互相依賴的事件而不是實現細節
• 適用於大量和資料有關的事件互動，特別是高實時性要求

• 一個流就是一個不間斷的按照時間排序的序列。它產生三種不同型別事件: 值，錯誤，完成的訊號。對這三個定義事件處理函式，就可以非同步的捕獲這些事件
• 每個stream有多個方法，呼叫時會基於原來的流返回一個新的流，原來的流不做修改，保證不可變性
• 資料流支援鏈式呼叫，你可以組合不同的函式來處理流，建立和過濾不同的流。甚至一個流或多個流可以作為另外一個流的輸入。你可以合併兩個資料流。你可以過濾一個資料流，從中獲取一個包含你感興趣的事件的資料流。你可以將來自一個資料流的值對映到另外一個資料流

var iterable = [1, 2];
var iterator = iterable[Symbol.iterator]();
iterator.next(); // => { value: "1", done: false}
iterator.next(); // => { value: "2", done: false}
iterator.next(); // => { value: undefined, done: true}複製程式碼

1. Promise本質上也是一個Observable，能使用fromPromise把Promise轉成Observable
2. 但是Promise .then()只能返回一個值，Observable可以返回多個值
3. Promise要麼resolve要麼reject，並且只響應一次。而Observable可以響應多次
4. Promise不能取消，Observable可以呼叫unsubscribe()取消訂閱

解決的問題

• 同步和非同步的統一
• 可組合的資料變更過程
• 資料和檢視的精確繫結
• 條件變更之後的自動重新計算

核心概念

var observable = Rx.Observable
// 通過create方法建立一個Observable
// 回撥函式會接受observer引數，也就是觀察者角色
	.create(function(observer) {
		observer.next('hi');
		observer.next('world');

        setTimeout(() => {
			observer.next('這一段是非同步操作');
		}, 30)
	})

// 訂閱這個 observable
// 只有在訂閱之後，才會在流Observable變化的時候，呼叫observer提供的方法，並通知他	
// 訂閱之後也可以取消訂閱，呼叫unsubscribe()即可
console.log('start')
var subscription = observable.subscribe(function(value) {
	console.log(value);
})
console.log('end')
setTimeOut(()=> {
  subscription.unsubscribe()
}, 5000)


// 程式會依次輸出
'start'
"hi"
'world'
'end'
'這一段是非同步操作'複製程式碼

Rx.Observable.of(2)
             .map(v => v * 2) 
             .subscribe(v => console.log('output:' + v));
// output:4複製程式碼

var Observer = {
    next(value) { /* 處理值*/ },
    error(error) { /* 處理異常 */ },
    complete() { /* 處理已完成態 */ }
};

next(): 接收Observable發出的值  （必傳）
error(): 不同於迭代器裡面用try catch，Observer用error方法接收錯誤 （可選）
complete(): 當沒有新的資料發出的時候，觸發操作  （可選）複製程式碼

• 每一個Subject都是一個Observable，可以訂閱他。從Observer的視角看，它並不能區分自己的執行環境是普通Observable的單路推送還是基於Subject的多路推送
• 每一個Subject也可以是Observer，因為他同樣由next、error、complete方法組成，呼叫next方法，Subject會給所有在他上面註冊的Observer多路推送當前的值

// 建立一個Observable，一秒鐘輸出一個數字，只取三個就結束
var source = Rx.Observable.interval(1000).take(3);

// 定義兩個observer物件
var observerA = {
    next: value => console.log('A next: ' + value),
    error: error => console.log('A error: ' + error),
    complete: () => console.log('A complete!')
}

var observerB = {
    next: value => console.log('B next: ' + value),
    error: error => console.log('B error: ' + error),
    complete: () => console.log('B complete!')
}

// 建立一個subject —— 特殊的Observable
var subject = new Rx.Subject()

// observerA訂閱Subject
subject.subscribe(observerA)

// Subject又以observer的身份訂閱Observable
source.subscribe(subject);

setTimeout(() => {
    subject.subscribe(observerB);
}, 1000);

// 輸出：
// "A next: 0"
// "A next: 1"
// "B next: 1"
// "A next: 2"
// "B next: 2"
// "A complete!"
// "B complete!"
 A、B兩個observer互不影響，是獨立的複製程式碼

• queue —— 遞迴的時候，queue會把遞迴阻塞，避免不必要的效能損耗
• asap —— as soon as possible，表現為setTimeout時間為0。多用於永不退訂的Observable，比如輪詢
• async —— 規定當前的Observable執行方式為非同步，用setInterval實現。
• animationFrame —— Window.requestAnimationFrame這個API實現，適合高頻率的UI動畫觸發

var observable = Rx.Observable.create(function (observer) {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    observer.complete();
});

console.log('before subscribe');
observable.observeOn(Rx.Scheduler.async) // 本來是同步的，變成了非同步
.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});
console.log('after subscribe');

// "before subscribe"
// "after subscribe"
// 1
// 2
// 3
// "complete"複製程式碼

應用場景

1. 有很多資料，非常多關於資料的操作
2. 展示的資料是多個資料組合而成，比如任務、對應owner、標籤等
3. 同一個資料的更新，可能來自不同的發起方
4. 新增的資料需要的資料處理規則應該和原來的相同

1. 資料通過快取和非同步方式獲取
2. 把每個資料流管道組合起來，流的疊合就是最後的資料
3. 獲取和訂閱放在一起，也就不需要知道資料的來源是哪裡了
4. 現在和未來的資料merge之後通過相同的API處理，保證資料的規則相同

其他

資料

• RxJS 5
• The introduction to Reactive Programming you've been missing
• 流動的資料——使用 RxJS 構造複雜單頁應用的資料邏輯