Angular6笔记之封装http的示例代码
最近抽空学习了一下Angular6,之前主要使用的是vue,所以免不了的也想对Angular6提供的工具进行一些封装,今天主要就跟大家讲一下这个http模块。
之前使用的ajax库是axios,可以设置baseurl,公共头部;集中捕捉错误等,由于Angular6的依赖注入机制,是不能通过直接修改http模块暴露的变量来封装的,但是通过官方文档我们知道可以通过拦截器(HttpInterceptor)来实现这一功能。拦截器可以拦截请求,也可以拦截响应,那么通过拦截请求就可以实现设置baseurl,公共头部;而通过拦截响应就可以实现集中捕获错误。废话不多说,上代码吧。
第一步:准备工作,导入HttpClientModule
在app.module.ts中导入HttpClientModule,然后在imports数组中将HttpClientModule加入到BrowserModule之后,具体代码为:
import{HttpClientModule}from'@angular/common/http'; @NgModule({ imports:[ BrowserModule, //importHttpClientModuleafterBrowserModule. HttpClientModule, ], declarations:[ AppComponent, ], bootstrap:[AppComponent] })
第二步:新建有关拦截器的文件
在app文件夹下新建http-interceptors文件夹,在其内新建base-interceptor.ts,index.ts两个文件。其中,base-interceptor.ts是用于设置拦截器的注入器文件,index.ts则为扩展拦截器的提供商。
###base-interceptor.ts import{Injectable}from'@angular/core'; import{ HttpEvent,HttpInterceptor,HttpHandler,HttpRequest, HttpErrorResponse }from'@angular/common/http'; import{throwError}from'rxjs' import{catchError,retry}from'rxjs/operators'; /*设置请求的基地址,方便替换*/ constbaseurl='http://localhost:8360'; @Injectable() exportclassBaseInterceptorimplementsHttpInterceptor{ constructor(){} intercept(req,next:HttpHandler){ letnewReq=req.clone({ url:req.hadBaseurl?`${req.url}`:`${baseurl}${req.url}`, }); /*此处设置额外的头部,token常用于登陆令牌*/ if(!req.cancelToken){ /*token数据来源自己设置,我常用localStorage存取相关数据*/ newReq.headers= newReq.headers.set('token','my-new-auth-token') } //sendclonedrequestwithheadertothenexthandler. returnnext.handle(newReq) .pipe( /*失败时重试2次,可自由设置*/ retry(2), /*捕获响应错误,可根据需要自行改写,我偷懒了,直接用的官方的*/ catchError(this.handleError) ) } privatehandleError(error:HttpErrorResponse){ if(error.errorinstanceofErrorEvent){ //Aclient-sideornetworkerroroccurred.Handleitaccordingly. console.error('Anerroroccurred:',error.error.message); }else{ //Thebackendreturnedanunsuccessfulresponsecode. //Theresponsebodymaycontaincluesastowhatwentwrong, console.error( `Backendreturnedcode${error.status},`+ `bodywas:${error.error}`); } //returnanobservablewithauser-facingerrormessage returnthrowError( 'Somethingbadhappened;pleasetryagainlater.'); }; }
###index.ts import{HTTP_INTERCEPTORS}from'@angular/common/http'; import{BaseInterceptor}from'./base-interceptor'; /**Httpinterceptorprovidersinoutside-inorder*/ exportconsthttpInterceptorProviders=[ {provide:HTTP_INTERCEPTORS,useClass:BaseInterceptor,multi:true}, ]; /* Copyright2017-2018GoogleInc.AllRightsReserved. UseofthissourcecodeisgovernedbyanMIT-stylelicensethat canbefoundintheLICENSEfileathttp://angular.io/license */
通过克隆修改req对象即可拦截请求,而操作**next.handle(newReq)**的结果即可拦截响应。如果需要修改,可直接扩展base-interceptor.ts或参考base-interceptor.ts文件新建其他文件,然后在index.ts中正确引入该拦截器,并将其添加到httpInterceptorProviders数组中即可。
第三步:注册提供商
在app.module.ts中加入以下代码:
import{httpInterceptorProviders}from'./http-interceptors/index' @NgModule({ declarations:[ AppComponent ], imports:[ BrowserModule, HttpClientModule ], providers:[ httpInterceptorProviders ], bootstrap:[AppComponent] })
至此,Angular6的http模块封装已经基本完成,如果有需要可以自行扩展,可参考第二步。如果看完以后不明白或者我有写的不对的地方,欢迎大家进行评论。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。