- XHRに関連する横断的機能(cross-cutting)を分離する
- Global Error handling
- Fail back to show notification
- Angular1ではHttpInterceptorを使うことで、これらを綺麗に分離できた
- refs: AngularJS: API: $http
結論
簡単にできない！！
following step
- 既存のHttpをOverrideするための
CustomHttpサービスを作成する bootstrapで既存のHttpをOverideする
custom-http.service.ts
import {Http, ConnectionBackend, RequestOptions, Request, RequestOptionsArgs, Response} from "angular2/http";
import {Observable} from "rxjs/Observable";
export class CustomHttp extends Http {
constructor(backend:ConnectionBackend,
defaultOptions:RequestOptions) {
super(backend, defaultOptions)
}
request(url:string | Request, options?:RequestOptionsArgs):Observable<Response> {
return super.request(url, options).catch(this.handleResponseError);
}
get(url:string, options?:RequestOptionsArgs):Observable<Response> {
return super.get(url, options).catch(this.handleResponseError);
}
// ...
private handleResponseError(res:Response) {
if (res.status === 401) {
// do something
} else if (res.status === 500) {
// do something
}
return Observable.throw(res);
}
}main.ts
import 'rxjs/Rx';
import {bootstrap} from 'angular2/platform/browser';
import {Provider} from "angular2/core";
import {AppComponent} from './app.component';
import {CustomHttp} from "./common/services/custom-http.service";
bootstrap(AppComponent, [
new Provider(Http, {
useFactory: (backend:XHRBackend, defaultOptions:RequestOptions) => {
return new CustomHttp(backend, defaultOptions)
},
deps: [XHRBackend, RequestOptions]
})
]);- Angualr2でもAngular1のHttpInterceptorと近いことはできる。
- ただ、少し面倒だ。