详解封装基础的angular4的request请求方法
为什么要封装呢？
angular4自身提供的请求方法是用Observable来实现的。用的是观察者模式，个人认为这用来写请求是非常方便的。
一个项目里会有非常多的不同的请求，但是其实每个请求都会有些共性。比如：每个请求都要传Authorization，比如每个请求都要先判断后台返回的status字段为200时才是请求成功，后台正真返回的数据在data字段里，比如对于错误信息的处理都是一样的......等等。
所以我们需要封装出一个请求，去统一处理这些问题，从而保证组件里调用请求方法的时候收到的值都是可以直接拿来用的，几乎不用再写些重复的代码。
希望封装成什么样呢？
当然是越少重复的代码越好，我们就是想偷懒！！！!
怎么实现呢？
首先先新建一个请求的service，文件名为：request.service.ts。然后跟着我来虚拟需求，一步一步的慢慢来完善这个service。
需求A
1.请求方式为get。
2.默认的请求超时时间为3秒，可传入别的超时时间。
3.后台返回的成功的json为这样：
{
"status":200,
"data":...
}
错误时这样：
{
"status":201,
"msg":"用户名或密码错误"
}
实现A
request.service.ts
/**
********************************************************************************************
*@App:test
*@author:isiico
*@type:service
*@src:services/request.service.ts
*
*@descriptions:
*请求的服务
*
********************************************************************************************
*/
//AngularCore
import{Injectable}from'@angular/core';
import{HttpClient}from'@angular/common/http';
//rxjs
import{Observable}from'rxjs/Observable';
import'rxjs/add/operator/map';
import'rxjs/add/operator/timeout';
import'rxjs/add/observable/throw';
@Injectable()
exportclassRequestService{
privatesetTimeout=3000;//默认的超时时间
constructor(privatehttp:HttpClient){
}
/**获取数据
*param:urlstring必填,请求的url
*timenumber可不填,请求的超时时间,如不填,默认为setTimeout
*return:ObservableHttpClient的get请求，请求完成后返回的值类型是any
**/
publicgetData(url,time=this.setTimeout):Observable{
letthiUrl=url;//用到的url
letthisTime=time;//用到的超时时间
returnthis.http.get(thiUrl)
.timeout(thisTime)
.map(res=>this.resFun(res));
}
/**返回数据的处理
*param:dataany必填,需要处理的数据
*return:resany返回处理后的值
**/
privateresFun(data:any):any{
letthisData:any=data;//需要处理的值
letres:any;//最终值
//当status为200时
if(thisData['status']==200){
res=thisData['data'];//给最终值赋值
}else{
//当status不为200时
leterr=thisData['msg'];//错误信息
thrownewError(err);//抛出错误
}
returnres;//返回最终值
}
}
需求B
1.为了安全，后台要求请求的头需要加上Authorization参数。
2.当请求失败（如404，500这种）时，处理好错误信息，最后的错误信息要像实现A里一样，是可以直接用的字符串类型的错误信息。
实现B
request.service.ts（只展示新增的代码，完整代码后面有）
import'rxjs/add/operator/catch';
@Injectable()
exportclassRequestService{
/**添加Authorization的属性*/
privateaddAuthorization(options:any):void{
options['headers']={
'Authorization':'1drf5dg4d7s4w7z',
};
}
/**获取数据
*param:urlstring必填,请求的url
*timenumber可不填,请求的超时时间,如不填,默认为setTimeout
*return:ObservableHttpClient的get请求，请求完成后返回的值类型是any
**/
publicgetData(url,time=this.setTimeout):Observable{
letthiUrl=url;//用到的url
letoptions={};//请求的设置
letthisTime=time;//用到的超时时间
this.addAuthorization(options);//请求头里添加Authorization参数
returnthis.http.get(thiUrl,options)
.timeout(thisTime)
.catch(this.httpErrorFun)//处理错误信息(必须放在timeout和map之间)
.map(res=>this.resFun(res));
}
/**对请求错误信息的处理
*param:errany必填,需要处理的错误信息
*return:resstring处理后的结果
**/
publichttpErrorFun(err:any):string{/*new*/
letres:string='';//处理后的结果/*new*/
letdata:any=err;//需要处理的值/*new*/
/**后台有返回错误信息时*/
if(data.hasOwnProperty('error')&&data.hasOwnProperty('message')){/*new*/
res=data.message;/*new*/
/**后台没有返回错误信息只有错误名时*/
}elseif(data.hasOwnProperty('name')){/*new*/
leterrName=data.name;/*new*/
/**请求超时*/
if(errName=='TimeoutError'){/*new*/
res='对不起，请求超时了';/*new*/
}
/**后台返回未授权时*/
}elseif(data=="Unauthorization"){/*new*/
res='您没有权限，请重新登录'/*new*/
}else{
res="哎呀，不知道是啥错误~~";/*new*/
}
returnObservable.throw(res);/*new*/
}
}
完整的requestservice代码
request.service.ts
/**
********************************************************************************************
*@App:test
*@author:isiico
*@type:service
*@src:services/request.service.ts
*
*@descriptions:
*请求的服务
*
********************************************************************************************
*/
//AngularCore
import{Injectable}from'@angular/core';
import{HttpClient}from'@angular/common/http';
//rxjs
import{Observable}from'rxjs/Observable';
import'rxjs/add/operator/map';
import'rxjs/add/operator/timeout';
import'rxjs/add/observable/throw';
import'rxjs/add/operator/catch';
@Injectable()
exportclassRequestService{
privatesetTimeout:number=3000;//默认的超时时间
constructor(privatehttp:HttpClient){
}
/**添加Authorization的属性*/
privateaddAuthorization(options:any):void{
options['headers']={
'Authorization':'1drf5dg4d7s4w7z',
};
}
/**获取数据
*param:urlstring必填,请求的url
*timenumber可不填,请求的超时时间,如不填,默认为setTimeout
*return:ObservableHttpClient的get请求，请求完成后返回的值类型是any
**/
publicgetData(url,time=this.setTimeout):Observable{
letthiUrl=url;//用到的url
letoptions={};//请求的设置
letthisTime=time;//用到的超时时间
this.addAuthorization(options);//请求头里添加Authorization参数
returnthis.http.get(thiUrl,options)
.timeout(thisTime)
.catch(this.httpErrorFun)//处理错误信息(必须放在timeout和map之间)
.map(res=>this.resFun(res));
}
/**返回数据的处理
*param:dataany必填,需要处理的数据
*return:resany返回处理后的值
**/
privateresFun(data:any):any{
letthisData:any=data;//需要处理的值
letres:any;//最终值
//当status为200时
if(thisData['status']==200){
res=thisData['data'];//给最终值赋值
}else{
//当status不为200时
leterr=thisData['msg'];//错误信息
thrownewError(err);//抛出错误
}
returnres;//返回最终值
}
/**对请求错误信息的处理
*param:errany必填,需要处理的错误信息
*return:resstring处理后的结果
**/
publichttpErrorFun(err:any):string{
letres:string='';//处理后的结果
letdata:any=err;//需要处理的值
/**后台有返回错误信息时*/
if(data.hasOwnProperty('error')&&data.hasOwnProperty('message')){
res=data.message;
/**后台没有返回错误信息只有错误名时*/
}elseif(data.hasOwnProperty('name')){
leterrName=data.name;
/**请求超时*/
if(errName=='TimeoutError'){
res='对不起，请求超时了';
}
/**后台返回未授权时*/
}elseif(data=="Unauthorization"){
res='您没有权限，请重新登录';
}else{
res="哎呀，不知道是啥错误~~";
}
returnObservable.throw(res);
}
}
小结
至此，我们已经完成了一个满足基本需求的，可以公共使用的请求服务，接下来我们来看怎么在组件内调用。
调用
我们有个叫list的组件，要调用get请求，请求成功显示数据，请求失败，显示错误信息。
list.component.ts
/**
********************************************************************************************
*@App:test
*@author:isiico
*@type:component
*@src:components/list.component.ts
*
*@descriptions:
*list组件
*
********************************************************************************************
*/
//AngularCore
import{Component,OnInit}from'@angular/core';
//Services
import{RequestService}from"../services/request.service";
@Component({
moduleId:module.id,
templateUrl:'list.component.html'
})
exportclassListComponentimplementsOnInit{
listApi='/assets/mock-data/list.json';//列表的api地址
list:Array;//列表数据(类型为数组)
listErrMsg:string='';//列表请求的错误信息
constructor(privatereq:RequestService){
}
/**获取list*/
getList(){
this.listErrMsg='';//清空错误信息
//发送请求
this.req.getData(this.cabinetListApi)
.subscribe(
res=>{
//请求成功
this.cabinets=[];
this.cabinets=res;
},err=>{
//请求失败
this.cabinets=[];
this.listErrMsg=err;
})
}
ngOnInit(){
this.getList();
}
}
页面的显示自己去完成吧！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。