angular8封装http服务的方法

爱秀

作者

这篇文章将为大家详细讲解有关angular8封装http服务的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

HttpClientModule

要在angular里使用http服务必须先在app.module.ts里导入HttpClientModule模块，不然会报错。

import{NgModule}from'@angular/core';
import{BrowserModule}from'@angular/platform-browser';
import{RouteReuseStrategy}from'@angular/router';
//导入关键模块
import{HttpClientModule}from'@angular/common/http';

import{IonicModule,IonicRouteStrategy}from'@ionic/angular';
import{SplashScreen}from'@ionic-native/splash-screen/ngx';
import{StatusBar}from'@ionic-native/status-bar/ngx';

import{AppRoutingModule}from'./app-routing.module';
import{AppComponent}from'./app.component';

@NgModule({
declarations:[AppComponent],
entryComponents:[],
imports:[BrowserModule,IonicModule.forRoot(),AppRoutingModule,HttpClientModule],
providers:[
StatusBar,
SplashScreen,
{provide:RouteReuseStrategy,useClass:IonicRouteStrategy}
],
bootstrap:[AppComponent]
})
exportclassAppModule{}

封装http

根据angular的官网，请求返回的是数据的 Observable 对象，所以组件要订阅（subscribe） 该方法的返回值。

import{Injectable}from'@angular/core';
import{HttpClient,HttpParams,HttpErrorResponse}from'@angular/common/http';
import{Observable,throwError}from'rxjs';
import{catchError}from'rxjs/operators';

@Injectable({
providedIn:'root'
})
exportclassHttpService{

privatehttp:any;

constructor(privateHttp:HttpClient){
this.http=Http;
}

//get方法
publicget(url:string,options?:Object,params?:Object):Observable<{}>{
lethttpParams=newHttpParams();
if(params){
for(constkeyinparams){
if(params[key]===false||params[key]){
httpParams=httpParams.set(key,params[key]);
}
}
}
returnthis.http.get(url,{headers:options,params:httpParams}).pipe(catchError(this.handleError));
}

//post方法
publicpost(url:string,body:any=null,options?:Object):Observable<{}>{
returnthis.http.post(url,body,options).pipe(catchError(this.handleError));
}

//post表单
publicpostForm(url:string,body:any=null,options?:Object):Observable<{}>{
lethttpParams=newHttpParams();
if(body){
for(constkeyinbody){
if(body[key]===false||body[key]){
httpParams=httpParams.set(key,body[key]);
}
}
}
returnthis.http.post(url,httpParams,options).pipe(catchError(this.handleError));
}

/**
*处理请求失败的错误
*@paramerrorHttpErrorResponse
*/
privatehandleError(error:HttpErrorResponse){
if(error.errorinstanceofErrorEvent){
console.error('Anerroroccurred:',error.error.message);
}else{
console.error(
`Backendreturnedcode${error.status},`+
`bodywas:${error.error}`);
}
console.log(error);
returnthrowError(error.error);
}
}

这里贴上get、post两种的方式的例子，其他如delete这些就不展示了，一样的原理。

细节

稍微说一下里面的细节：
return this.http.post(url, httpParams, options).pipe(catchError(this.handleError));

这里返回的是Observable<{}> ，并通过pipe管道处理请求异常，异常的处理在最下面的handleError 方法里。

使用

//引入封装好的http服务
constructor(privatehttp:HttpService){}

/**
*测试get方法
*@paramsuccessCallback成功的回调
*@paramfailCallback失败的回调
*/
publictestGet(url:string,successCallback?:Function,failCallback?:Function){
consthttpOptions={
headers:newHttpHeaders({
'Content-Type':'application/json;charset=UTF-8'
})
};

this.http.get(url,httpOptions.headers).subscribe(
(res:any)=>{
successCallback(res);//成功走sucessCallback
},(err:HttpErrorResponse)=>{
failCallback(err);//失败
}
);
}

这是一个具体的get请求service，testGet定义里三个参数，一个是请求地址，还有成功的回调与失败的回掉。 subscribe订阅observable 对象。