1. 背景介紹
- 什么是
RxJs：
RxJS是一種針對異步數(shù)據(jù)流編程工具，或者叫響應式擴展編程；可不管如何解釋RxJS其目標就是異步編程，Angular引入RxJS為了就是讓異步可控、更簡單。 - 響應式編程：在計算領域，響應式編程一種面向數(shù)據(jù)流和變化傳播的編程范式。這意味著可以在編程語言中很方便地表達靜態(tài)或動態(tài)的數(shù)據(jù)流，而相關的計算模型會自動將變化的值通過數(shù)據(jù)流進行傳播。
2. 知識剖析
Rxjs中的兩個重要概念：Observer（觀察者）和Subscription
- 什么是
Observer？
Observer（觀察者）是Observable（可觀察對象）推送數(shù)據(jù)的消費者。在RxJS中，Observer是一個由回調(diào)函數(shù)組成的對象，鍵名分別為next、error和complete，以此接受Observable推送的不同類型的通知，下面的代碼段是Observer的一個示例：
var observer = {
next: x => console.log('Observer got a next value: ' + x),
error: err => console.error('Observer got an error: ' + err),
complete: () => console.log('Observer got a complete notification'),
};
// next / error / compelete 可缺
調(diào)用Observer邏輯，只需在subscribe（訂閱）Observable后將Observer傳入
observable.subscribe(observer);
- 什么是
Subscription
什么是Subscription？Subscription是一個代表可以終止資源的對象，表示一個Observable的執(zhí)行過程。Subscription有一個重要的方法：unsubscribe。這個方法不需要傳入?yún)?shù)，調(diào)用后便會終止相應的資源。
var observable = Rx.Observable.interval(1000);
var subscription = observable.subscribe(x => console.log(x));
subscription.unsubscribe();
3. 常見問題
Angular 4 中如何使用Rxjs進行http請求？
// http get method service
public getAricle(url: string, searchText: URLSearchParams) {
private getService: any = new Observable();
this.getService = this.http.put(url, body options)
.map(...)
.catch(...);
}
// component
this.servcieName.subscribe(data => {});
4. 編碼實戰(zhàn)
- 一個小demo
var a, b = 1, c =2;
a = b + c;
console.log('b=' + b);
console.log('c=' + c);
console.log('a=' + a);
b = 3;
c = 2;
console.log('a=' + a);
這段中，我們?nèi)绻胱?code>a輸出為5,就是當b和c二次賦值后a的值是不會自動更新為5的。
但是使用Rxjs方法就可以實現(xiàn)。
var b$ = Rx.Observable.from([1, 3]);
var c$ = Rx.Observable.from([2, 2]);
var a$ = Rx.Observable.zip(b$, c$, (b, c) => {
console.log('b=' + b);
console.log('c=' + c);
return b + c;
});
a$.subscribe(a => console.log('a=' + a));
2.另一個小demo
<html>
<head>
<!---引入Rxjs--->
<script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script>
</head>
<body>
Weight: <input type="number" id="weight"> kg
<br/>
Height: <input type="number" id="height"> cm
<br/>
Your BMI is <div id="bmi"></div>
</body>
以上是兩個輸入框。
let weight = document.getElementById('weight');
let height = document.getElementById('height');
let bmi = document.getElementById('bmi');
let weight$ = Rx.Observable
.fromEvent(weight, 'input')
.pluck('target', 'value');
let height$ = Rx.Observable
.fromEvent(height, 'input')
.pluck('target', 'value');
let bmi$ = Rx.Observable
.combineLatest(weight$, height$, (w, h) => w/(h*h/100/100));
bmi$.subscribe(b => bmi.innerHTML=b);
combineLatest 操作符其實是在組合2個源數(shù)據(jù)流中選擇最新的2個數(shù)據(jù)進行配對，如果其中一個源之前沒有任何數(shù)據(jù)產(chǎn)生，那么結果流也不會產(chǎn)生數(shù)據(jù)。
所以，當我們更新其中一個輸入框的值的時候，bmi值也會隨著變化。想一想，這個功能如果用js方法實現(xiàn)還是比較煩的。
5. 擴展思考
Observable 如何轉 Promise？
public getAricle(url: string, searchText: URLSearchParams) {
private getService: any = new Observable();
this.getService = this.http.put(url, body options)
.toPromise() // 看到?jīng)]，這樣
.map(...)
.catch(...);
}
6. 參考文獻
Rx--隱藏在Angular 中的利劍
RxJS 核心概念Observer Subscription
30天精通Rxjs
介紹RxJS在Angular中的應用
7. 更多討論
Observable 和 Promise有什么區(qū)別？
Observable 和 Promise 主要區(qū)別
