如何为每个http请求添加预加载器(angular2)?

时间:2016-07-11 10:55:53

标签: angular angular2-http

在我的angular2应用程序中,我希望每次http请求启动时显示预加载器(锁定屏幕),并在请求结束后隐藏它。 subscribe方法允许我们检测请求何时成功,有错误或完成。我认为每次在请求上调用subscribe方法时编写预加载器代码都是一个坏主意。

  1. 如何检测请求的开始/结束(订阅方法除外)?
  2. 为每个请求添加预加载器的好方法是什么?

2 个答案:

答案 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)

你可以用两种方式做到这一点

  1. 创建一个DataService并包装Http,用于调用API,将预加载器逻辑投入使用。

  2. 您可以使用Interceptor,此处是example herehere

  3. 我更喜欢可扩展的选项1,您可以从一个地方控制所有来电。