189 8069 5689
这篇文章给大家分享的是有关Angular http 拦截器的使用方法。小编觉得挺实用的，因此分享给大家学习。如下资料是关于Angular http 拦截器的内容。
网站建设哪家好，找成都创新互联公司！专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了石龙免费建站欢迎大家使用！
Angular http的拦截器一般用来处理每个http都需要添加的参数或者是统一处理错误信息
Angular1.x的http拦截器处理：
$httpProvider.interceptors.push(function ($q) {
return {
request: function (config) {
var url = config.url;
//这个token表示是在登录状态, 不要用在header中，options无法设置header
if(TASApp["x-auth-token"]){
if(url.indexOf("?") == -1){
url+="?x-auth-token="+TASApp["x-auth-token"];
}else{
url+="&x-auth-token="+TASApp["x-auth-token"];
}
}
config.url = url;
return config || $q.reject(config);
},
response: function (res) {
//统一处理返回信息，如果是错误则在这里统一处理，注意如果这样处理错误(reject)，那么所有的错误信息会进入http的error回调，在success里默认就是成功，都可以不判断data.success
if (res.data.success == false) {
TASApp.ajaxReturnErrorHandler(res.data["info"]); //TASApp是一个constant对象
return $q.reject(res.data); //will go to error callback
} else if (res.data.success == "relogin") {
TASApp.relogin();
return $q.reject(res.data); //will go to error callback
} else {
return res; //will go to success callback
}
},
responseError: function (res) {
//统一处理请求没发成功的错误
TASApp.ajaxErrorHandler();
return $q.reject(res);
}
};
});Angular2.x的http拦截器处理：
export class AddHttpHeaderInterceptor implements HttpInterceptor {
constructor(private formService: FormService, private formHelper: FormHelper, private message: NzMessageService, private lang: Lang) {
}
intercept(req: HttpRequest, next: HttpHandler) {
// set X-Requested-With that serve need to for ajax
let clonedReq = req.clone({headers: req.headers.set('X-Requested-With', 'XMLHttpRequest')});
if (this.formService.currentUser) {
//options http can not add x-auth-token, use param
//clonedReq = req.clone({headers: req.headers.set('x-auth-token', this.formService.currentUser['x-auth-token'])});
//global add param x-auth-token and
clonedReq = req.clone({params: req.params.set('x-auth-token', this.formService.currentUser['x-auth-token']),
headers: req.headers.set('X-Requested-With', 'XMLHttpRequest')});
}
// ===========================================================
// global handle error
// ===========================================================
return next.handle(clonedReq).pipe(
catchError(this.formService.handleError),
//handle success false
filter(res => {
if(res['statusText'] && res['statusText'] === 'OK'){
if(res['body'] && (res['body']['success'] == false || res['body']['success']=='relogin')){
if(res['body']['success'] == 'relogin'){
//handle relogin here, can add some message
(window).location.href = this.formHelper.getBaseUrl()+'login';
return false;
} else {
//if no info will have a code
this.message.error(res['body']['info'] || this.lang.lang["errorCode"][res['body']['code']]);
console.log(res);
//if return false will not trigger subscribe function, if you need trigger return true
return true;
/*
this will fire subscribe error handle, that means if backend error will go to subscribe->error,
subscribe->next is only handle backend success, bug if services use like MyShares/getFormInfo that will have problem,
need add error handle for every http request and run handler function
this.http.get(url).subscribe(obj=>{handle when backend success},error=>{handle when backend error}
*/
//throw new Error("error");
}
}
}
return true;
})
);
}
}
@NgModule({
declarations: [
],
imports: [
],
providers: [
{provide: HTTP_INTERCEPTORS, useClass: AddHttpHeaderInterceptor, deps: [FormService, FormHelper, NzMessageService, Lang], multi: true},
{provide: APP_INITIALIZER, useFactory: loginAndInitForm, deps: [FormService], multi: true},
{provide: NZ_I18N, useValue: zh_CN},
{provide: NZ_MODAL_CONFIG, useValue: {autoBodyPadding: true}},
{provide: NZ_MESSAGE_CONFIG, useValue: {nzDuration: 3000}}
],
bootstrap: [AppComponent]
}) 以上就是Angular http 拦截器的使用方法介绍，详细使用情况还得要大家自己使用过才能知道具体要领。如果想阅读更多相关内容的文章，欢迎关注创新互联行业资讯频道！