全局添加标头和超时请求
我做了一个拦截器服务,看看请求的错误是401(unAuthorized)进入带有show的登录页面还是全局隐藏加载。
但仍然需要使用此服务(拦截器服务)全局添加标头,而不是在每个请求上添加标头。
秒我还需要添加超时(30000)如果请求没有回复这个30秒的响应,
i在每个请求它手动尝试它但我遇到了hideLoadding的问题,因为我配置了全球加载。
拦截器 - 服务代码:
i did an interceptor service to see if the error of a request is 401 (unAuthorized) to go to login page with show and hide loading globally also. But still need to add the header globally with this service (interceptor-service) instead of add header on every request . second i need also to add timeout(30000) if the request didn't reply a response this 30 seconds, i tried it manually on every request it worked but i faced a issue with hideLoadding because i configure the loading also globally. interceptor-service code:
export class HttpInterceptor extends Http {
public loaderService: LoaderService
constructor(backend: ConnectionBackend,
defaultOptions: RequestOptions,
public events: Events) {
super(backend, defaultOptions);
}
get(url: string, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.get(url, options));
}
post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.post(url, body, this.getRequestOptionArgs(options)));
}
getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs {
if (options == null) {
options = new RequestOptions();
}
if (options.headers == null) {
options.headers = new Headers();
}
options.headers.append('Content-Type', 'application/json');
return options;
}
intercept(observable: Observable<Response>): Observable<Response> {
this.events.publish('showLoader');
return observable
.catch(
(err) => {
if (err.status == 401) {
this.events.publish('unAuthorizedRequest', err);
this.events.publish('hideLoader');
return Observable.empty();
} else {
this.events.publish('hideLoader');
return Observable.throw(err);
}
})
.do(
() => {
this.events.publish('hideLoader');
return Observable.empty();
},
() => {
this.events.publish('hideLoader');
return Observable.empty();
}
);
}
}
:
this.events.subscribe('unAuthorizedRequest', (err) => {
if (!_.endsWith(err.url, '/token')) {
this.nav.setRoot(LoginPage);
}
});
this.events.subscribe('showLoader', () => {
this.numberOfLoading = this.numberOfLoading + 1;
if(this.numberOfLoading === 1){
this.loader = this.loaderService.presentLoading();
}
});
this.events.subscribe('hideLoader', () => {
if(this.numberOfLoading === 1){
this.loader.dismiss();
this.numberOfLoading = 0;
}
if(this.numberOfLoading > 0){
this.numberOfLoading = this.numberOfLoading - 1;
}
});
要全局处理超时,您可以利用 timeout
运算符直接以你的observable方式运行:
To handle timeout globally, you can leverage the timeout
operator directly on your observable this way:
intercept(observable: Observable<Response>): Observable<Response> {
this.events.publish('showLoader');
return observable
.timeout(2000, new Error('delay exceeded')) // <-------
.catch( ... );
}
关于全局添加标题,您可以利用 getRequestOptionArgs
方法。
Regarding adding a header globally, you can leverage your getRequestOptionArgs
method.
有关详细信息,请参阅此文章:
See this article for more details:
- http://restlet.com/company/blog/2016/04/18/interacting-efficiently-with-a-restful-service-with-angular2-and-rxjs-part-3/