在我的angular2应用程序中,我希望每次http
请求启动时显示预加载器(锁定屏幕),并在请求结束后隐藏它。 subscribe方法允许我们检测请求何时成功,有错误或完成。我认为每次在请求上调用subscribe方法时编写预加载器代码都是一个坏主意。
答案 0 :(得分:2)
我会扩展Http
类,如下所示,添加一个包含observable / subject的服务,以便在执行HTTP请求时得到通知
export class CustomHttp extends Http {
constructor(backend: ConnectionBackend,
defaultOptions: RequestOptions,
private _notifierService:NotifierService) {
super(backend, defaultOptions);
}
request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
this._notifierService.notifyBeforeRequest();
return super.request(url, options);
}
get(url: string, options?: RequestOptionsArgs): Observable<Response> {
this._notifierService.notifyBeforeRequest();
return super.get(url, options);
}
(...)
}
按如下所述注册:
bootstrap(AppComponent, [HTTP_PROVIDERS,
{
provide: Http,
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, notifyService:NotifierService) => {
return new CustomHttp(backend, defaultOptions, notifyService);
},
deps: [XHRBackend, RequestOptions, NotifierService]
}
]);
服务工具可能是这样的:
export class NotifierService {
notifier:Subject<any> = new Subject();
notifyBeforeRequest() {
notifier.next();
}
}
您可以通过这种方式获得通知:
@Component({
(...)
})
export class SomeComponent {
constructor(private notifyService:NotifierService) {
this.notifyService.notifier.subscribe(() => {
// do something
});
}
}
答案 1 :(得分:1)
你可以用两种方式做到这一点
创建一个DataService并包装Http
,用于调用API,将预加载器逻辑投入使用。
您可以使用Interceptor
,此处是example here和here
我更喜欢可扩展的选项1,您可以从一个地方控制所有来电。