1. 背景介紹
- 什么是
RxJs：
RxJS是一種針對(duì)異步數(shù)據(jù)流編程工具匣砖，或者叫響應(yīng)式擴(kuò)展編程；可不管如何解釋RxJS其目標(biāo)就是異步編程煞烫，Angular引入RxJS為了就是讓異步可控浑此、更簡單。 - 響應(yīng)式編程：在計(jì)算領(lǐng)域滞详，響應(yīng)式編程一種面向數(shù)據(jù)流和變化傳播的編程范式凛俱。這意味著可以在編程語言中很方便地表達(dá)靜態(tài)或動(dòng)態(tài)的數(shù)據(jù)流，而相關(guān)的計(jì)算模型會(huì)自動(dòng)將變化的值通過數(shù)據(jù)流進(jìn)行傳播茵宪。
2. 知識(shí)剖析
Rxjs中的兩個(gè)重要概念：Observer（觀察者）和Subscription
- 什么是
Observer最冰？
Observer（觀察者）是Observable（可觀察對(duì)象）推送數(shù)據(jù)的消費(fèi)者。在RxJS中稀火，Observer是一個(gè)由回調(diào)函數(shù)組成的對(duì)象，鍵名分別為next赌朋、error和complete凰狞，以此接受Observable推送的不同類型的通知，下面的代碼段是Observer的一個(gè)示例：
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是一個(gè)代表可以終止資源的對(duì)象，表示一個(gè)Observable的執(zhí)行過程团甲。Subscription有一個(gè)重要的方法：unsubscribe逾冬。這個(gè)方法不需要傳入?yún)?shù)，調(diào)用后便會(huì)終止相應(yīng)的資源躺苦。
var observable = Rx.Observable.interval(1000);
var subscription = observable.subscribe(x => console.log(x));
subscription.unsubscribe();
3. 常見問題
Angular 4 中如何使用Rxjs進(jìn)行http請(qǐng)求身腻？
// 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. 編碼實(shí)戰(zhàn)
- 一個(gè)小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,就是當(dāng)b和c二次賦值后a的值是不會(huì)自動(dòng)更新為5的匹厘。
但是使用Rxjs方法就可以實(shí)現(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.另一個(gè)小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>
以上是兩個(gè)輸入框。
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 操作符其實(shí)是在組合2個(gè)源數(shù)據(jù)流中選擇最新的2個(gè)數(shù)據(jù)進(jìn)行配對(duì)愈诚，如果其中一個(gè)源之前沒有任何數(shù)據(jù)產(chǎn)生她按，那么結(jié)果流也不會(huì)產(chǎn)生數(shù)據(jù)牛隅。
所以，當(dāng)我們更新其中一個(gè)輸入框的值的時(shí)候酌泰，bmi值也會(huì)隨著變化媒佣。想一想，這個(gè)功能如果用js方法實(shí)現(xiàn)還是比較煩的陵刹。
5. 擴(kuò)展思考
Observable 如何轉(zhuǎn) 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. 參考文獻(xiàn)
Rx--隱藏在Angular 中的利劍
RxJS 核心概念Observer Subscription
30天精通Rxjs
介紹RxJS在Angular中的應(yīng)用
7. 更多討論
Observable 和 Promise有什么區(qū)別授霸？
Observable 和 Promise 主要區(qū)別
