Question

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

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

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

Answer 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.

Answer 2

您将必须在AppModule中添加HttpClientModule

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

有关更多信息，请参阅： https://alligator.io/angular/httpclient-intro/

如何在Angular的HttpClient中使用reportProgress？

2 个答案: