Question

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

如何检测请求的开始/结束（订阅方法除外）？
为每个请求添加预加载器的好方法是什么？

Answer 1

我会扩展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
    });
  }

}

Answer 2

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

创建一个DataService并包装Http，用于调用API，将预加载器逻辑投入使用。
您可以使用Interceptor，此处是example here和here

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

如何为每个http请求添加预加载器（angular2）？

2 个答案: