关于RX系列,博主不需要多讲,源自C#开发,纯粹的响应链状式的编程,让大型项目的代码简略化以及底层优化。博主只要编程者记住一个概念就行,并不是所有编程适合RX,但是RX是解决动态响应,以及多线程的首选。Angular升级到2过后,一直延续着promise做流处理,但是它自身携带的RXjs又是处理流的利器。本篇从实战角度出发,简要的概括它的两个使用方法
1、极简HTTP请求
1.1、创建provider
在命令行输入ionic g provider youProviderName
在创建好后,系统会自动导入从@angular/http
里导入Http
这个类,方便后续做直接使用此类做HTTP请求。
1.2、请求头处理
代码语言:javascript复制/**
定义全局头部
1、指定Content-Type 和服务器互相以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请求
代码语言:javascript复制//由于rxjs包很大,内容很多,我们取有需要的即可
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源码中是这样写的:
代码语言:javascript复制 /**
* 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为可携带参数,所以在某些特定的情况下可以使用默认的头部进行HTTP请求
1.4、建立请求响应方法
代码语言:javascript复制 //某个需要请求的类里:
export class RealPage{
constructor(public navCtrl: NavController, public navParams: NavParams, public baseService:BaseServiceProvider) {
}
param:any //请求携带的参数,这里可以自定义为number、string、boolean、Array类型
ionViewDidLoad(){
//建立get请求
this.baseService.get()
.subscribe(
data => this.responseData = data, Error => {//请求失败,处理信息}, () => {//请求成功,ResponseData数据处理}
);
//建立post请求
this.baseService.post(this.param)
.subscribe(
data => this.responseData = data, Error => {//请求失败,处理信息}, () => {//请求成功,ResponseData数据处理}
);
}
}
通过以上使用RXjs方法,我们很快的就完成了HTTP请求的搭建,很简单的响应式模式,很迅捷的编程体验RxJS,你值得使用。
1.5、简单理解Rx
很多人难以理解Rx,其实很简单,因为翻译文档很拗口,导致很多东西描述起来非常困难,当然想知道原理就得看源码去理解了。这里就简单理解,一个特殊的观察者,监听器--Observable,一个注册机制 --Subscribe, 一经注册便可拥有传输能力和响应机制,想使用,必须注册,就和需要啥啥权益注册很多会员一样,仅此而已。
2、回调监听--组件中通讯
在写ionic时发现当页面pop()的时候,竟无返回响应机制,这个时候,页面与页面就可以使用RXjs进行传播串接起来,类似于Android里面的EventsBus,Otto等。
2.1、封装provider
<<借鉴の博客>>
代码语言:javascript复制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、监听与回调
代码语言:javascript复制export class MainPage {
constructor(public eventsBus:RxBus) {}
ionViewDidLoad() {
//注册监听器
this.eventsBus.bus().subscribe(param=>{
//处理param
})
}
}
代码语言:javascript复制export class NextPage {
constructor(public eventsBus:RxBus,public nav:NavController) {}
//回到MainPage页面
backClick(){
// 设置回调
this.eventsBus.setListener("param");
this.nav.pop();
}
}
这样一来,MainPage就会接收到来自NextPage的param,非常好的实现了页面间的通讯。