關(guān)于RX系列与纽，博主不需要多講，源自C#開發(fā)塘装，純粹的響應(yīng)鏈狀式的編程急迂，讓大型項目的代碼簡略化以及底層優(yōu)化。博主只要編程者記住一個概念就行氢哮，并不是所有編程適合RX，但是RX是解決動態(tài)響應(yīng)型檀，以及多線程的首選冗尤。Angular升級到2過后，一直延續(xù)著promise做流處理胀溺，但是它自身攜帶的RXjs又是處理流的利器裂七。本篇從實戰(zhàn)角度出發(fā)，簡要的概括它的兩個使用方法
1仓坞、極簡HTTP請求
1.1背零、創(chuàng)建provider
在命令行輸入ionic g provider youProviderName 在創(chuàng)建好后，系統(tǒng)會自動導(dǎo)入從@angular/http里導(dǎo)入Http這個類无埃，方便后續(xù)做直接使用此類做HTTP請求徙瓶。
1.2、請求頭處理
/**
定義全局頭部
1嫉称、指定Content-Type 和服務(wù)器互相以json交互<RequestBody 為json>
2侦镇、指定ACCESS_TOKEN用于登陸驗證
*/
private header = new Headers({
'Content-Type': 'application/json',
'ACCESS_TOKEN': this.getToken()
});
getToken() {
let token = localStorage.getItem("token");
return token || ""
}
自定義請求頭后我們可以完全掌握與后臺的請求對接方式，在后期無論以表單傳文件织阅，或者是soap請求方面都可以自定義壳繁，這里只做簡單的說明。
1.3、get闹炉、post請求
//由于rxjs包很大蒿赢，內(nèi)容很多，我們?nèi)∮行枰募纯?import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch'
export class BaseServiceProvider{
......
/**
使用自定義頭部option
*/
private option = new RequestOptions({heads:this.header})
/**
get請求渣触，注冊請求體
url：請求url
ResponseBody: 自定義pojo類
*/
get():Observable<ResponseBody>{
return this.http.get(url,this.option)
.map(response=>response.json())
.catch(this.handleError)
}
/**
post請求羡棵，注冊請求體
url：請求url
ResponseBody:自定義pojo類
*/
post(param):Observable<ResponseBody>{
return this.http.post(url,{'key',param},this.option)
.map(response=>response.json())
.catch(this.handleError)
}
//這里直接使用官方教程的類，處理錯誤信息
private handleError(error: Response | any) {
this.dialog.dismiss();
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}
......
注意：這里的get昵观，post源碼中是這樣寫的:
/**
* Performs a request with `get` http method.
*/
get(url: string, options?: RequestOptionsArgs): Observable<Response>;
/**
* Performs a request with `post` http method.
*/
post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>;
option為可攜帶參數(shù)晾腔，所以在某些特定的情況下可以使用默認(rèn)的頭部進(jìn)行HTTP請求
1.4、建立請求響應(yīng)方法
//某個需要請求的類里:
export class RealPage{
constructor(public navCtrl: NavController, public navParams: NavParams, public baseService:BaseServiceProvider) {
}
param:any //請求攜帶的參數(shù)啊犬，這里可以自定義為number灼擂、string、boolean觉至、Array類型
ionViewDidLoad(){
//建立get請求
this.baseService.get()
.subscribe(
data => this.responseData = data, Error => {//請求失敗剔应，處理信息}, () => {//請求成功，ResponseData數(shù)據(jù)處理}
);
//建立post請求
this.baseService.post(this.param)
.subscribe(
data => this.responseData = data, Error => {//請求失敗语御，處理信息}, () => {//請求成功峻贮，ResponseData數(shù)據(jù)處理}
);
}
}
通過以上使用RXjs方法，我們很快的就完成了HTTP請求的搭建应闯，很簡單的響應(yīng)式模式纤控，很迅捷的編程體驗RxJS，你值得使用碉纺。
1.5船万、簡單理解Rx
很多人難以理解Rx，其實很簡單骨田，因為翻譯文檔很拗口耿导，導(dǎo)致很多東西描述起來非常困難，當(dāng)然想知道原理就得看源碼去理解了态贤。這里就簡單理解舱呻，一個特殊的觀察者，監(jiān)聽器--Observable悠汽，一個注冊機制 --Subscribe箱吕， 一經(jīng)注冊便可擁有傳輸能力和響應(yīng)機制，想使用柿冲，必須注冊殖氏，就和需要啥啥權(quán)益注冊很多會員一樣，僅此而已姻采。
2雅采、回調(diào)監(jiān)聽--組件中通訊
在寫ionic時發(fā)現(xiàn)當(dāng)頁面pop()的時候爵憎，竟無返回響應(yīng)機制，這個時候婚瓜，頁面與頁面就可以使用RXjs進(jìn)行傳播串接起來宝鼓，類似于Android里面的EventsBus，Otto等巴刻。
2.1愚铡、封裝provider
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class RxBus{
private param: any;
private subject: Subject<any> = new Subject()
setListener(param: any): void {
this.param= param;
this.subject.next(param);
}
bus(): Observable<any> {
return this.subject.asObservable();
}
}
2.2、監(jiān)聽與回調(diào)
export class MainPage {
constructor(public eventsBus:RxBus) {}
ionViewDidLoad() {
//注冊監(jiān)聽器
this.eventsBus.bus().subscribe(param=>{
//處理param
})
}
}
export class NextPage {
constructor(public eventsBus:RxBus,public nav:NavController) {}
//回到MainPage頁面
backClick(){
// 設(shè)置回調(diào)
this.eventsBus.setListener("param");
this.nav.pop();
}
}
這樣一來胡陪，MainPage就會接收到來自NextPage的param沥寥，非常好的實現(xiàn)了頁面間的通訊。
結(jié)尾的話：這就是Rx的代碼魅力柠座，非常簡單的完成很多任務(wù)邑雅，后面會有相冊處理方面的博文，到時候著重講解RXjs處理文件的方式妈经，盡請期待淮野！
