如何在 Angular 的 HttpClient 中使用 reportProgress？ [复制]

Posted 2023-03-04

【中文标题】如何在 Angular 的 HttpClient 中使用 reportProgress？ [复制]

【英文标题】：How to use reportProgress in HttpClient in Angular? [duplicate]

【发布时间】：2022-02-16 22:30:11

【问题描述】：

我正在使用HTTP POST 方法下载文件。我想调用另一种方法向最终用户显示下载进度，直到文件下载完成。 为此，如何在HttpClient 中使用reportProgress。

  downfile(file: any): Observable<any> 

    return this.http.post(this.url , app, 
      responseType: "blob", reportProgress: true, headers: new HttpHeaders(
         'Content-Type': 'application/json' ,
      )
    );
  

【参考方案1】：

您需要使用 reportProgress: true 来显示任何 HTTP 请求的一些进度。如果您想查看 all events, including the progress of transfers，您还需要使用 observe: 'events' 选项并返回 Observable 类型为 HttpEvent。然后你可以在组件方法中捕获所有的events(DownloadProgress, Response..etc)。 在Angular Official Documentation 中查找更多详细信息。

  downfile(file: any): Observable<HttpEvent<any>>

    return this.http.post(this.url , app, 
      responseType: "blob", reportProgress: true, observe: "events", headers: new HttpHeaders(
         'Content-Type': 'application/json' ,
      )
    );
  

然后在组件中您可以捕获所有events，如下所示。

this.myService.downfile(file)
    .subscribe(event => 

        if (event.type === HttpEventType.DownloadProgress) 
            console.log("download progress");
        
        if (event.type === HttpEventType.Response) 
            console.log("donwload completed");
        
);

查找HttpEventTypes Here.

【讨论】：

如何配置文件各部分的包字节数？

@Sérgio S. Filho 无法得到您的要求

您好！为了将文件分部分发送到服务器，客户端应用程序会将文件分解为更少量的字节。我一直在寻找如何配置这些小字节包的大小。我认为它可以增加或减少视觉反馈百分比精度。也许有助于显示更流畅的加载反馈。

【参考方案2】：

您必须在 AppModule 中添加 HttpClientModule

您首先需要通过创建 HttpRequest 类的实例并使用 reportProgress 选项来构建请求对象。

更多信息请参考： https://alligator.io/angular/httpclient-intro/