如何使用HttpClient报告进度并从慢速方法返回数据？

Question

我有一个相当沉重的api方法，需要一个进步微调器。我正在寻找使用Bootstrap进度条。所以我正在阅读HttpClient文档和一些处理这类事件的例子。这很好，但我的数据登陆在哪里？我是否需要将另一个订阅链接到最后才能将数据映射到我的对象中？

我需要的是一个调用方法的示例，该方法返回我的模型类列表，以及进度事件。

但是，这里是文档的摘录 如果速度很慢，将如何使用此方法使用httpevents。

https://angular.io/guide/http

getConfig() {
  return this.http.get<Config>(this.configUrl)
    .pipe(
      retry(3), // retry a failed request up to 3 times
      catchError(this.handleError) // then handle the error
    );
}

Answer 1

您可以创建加载器服务。

所以在你的请求中你可以这样做：

getConfig() {

 this.loaderService.display(true);                <-- Show the loading

 return this.http.get<Config>(this.configUrl)
 .pipe(
  retry(3), // retry a failed request up to 3 times
  catchError(
   this.loaderService.display(false);             <-- Hide the loading in case of error      
   this.handleError
  ) // then handle the error
 );

   this.loaderService.display(false);             <-- Hide the loading       

}

我用过那个教程 - > https://medium.com/@zeljkoradic/loader-bar-on-every-http-request-in-angular-6-60d8572a21a9

显示我如何获取api方法返回的数据：

我创建了一个负责与API通信的服务。

service - >让我们调用configService

    //First way
    getConfigInService() {
     const response = 
     this.http.get<Config>(this.configUrl);
     return response;
    }

    //Second way
    getConfigInService() {
     return this.http.get<Config>(this.configUrl)
     .pipe (
      map((config: any) => {
       return config.data; --> Have to analyse your json structure that is returned
      })
     );
    }

然后在我的组件中，我调用该服务并处理返回：

零件

  private getConfigInComponent(): void {
   this.loaderService.display(true);          <-- Show the loading
   this.configService.getConfigInService()
     .subscribe( (config: any) => {
      this.config = config;
      this.loaderService.display(false);      <-- Hide the loading

     }, (error: any) => {
     console.error("Erro-> ", error);
     this.loaderService.display(false);      <-- Hide the loading in case of error
   });

这是一个可能有用的链接 - > Angular 6 http.get - displaying returned object in console