Angular9 跟踪和显示请求进度

应用程序有时会传输大量数据，而这些传输可能要花很长时间。文件上传就是典型的例子。你可以通过提供有关此类传输的进度反馈，为用户提供更好的体验。

要想发出一个带有进度事件的请求，你可以创建一个 HttpRequest 实例，并把 reportProgress 选项设置为 true 来启用对进度事件的跟踪。

Path："app/uploader/uploader.service.ts (upload request)" 。

const req = new HttpRequest('POST', '/upload/file', file, {
  reportProgress: true
});

注：

• 每个进度事件都会触发变更检测，所以只有当需要在 UI 上报告进度时，你才应该开启它们。

• 当 HttpClient.request() 和 HTTP 方法一起使用时，可以用 observe: 'events' 来查看所有事件，包括传输的进度。

接下来，把这个请求对象传递给 HttpClient.request() 方法，该方法返回一个 HttpEvents 的 Observable（与 拦截器 部分处理过的事件相同）。

Path："app/uploader/uploader.service.ts (upload body)" 。

// The `HttpClient.request` API produces a raw event stream
// which includes start (sent), progress, and response events.
return this.http.request(req).pipe(
  map(event => this.getEventMessage(event, file)),
  tap(message => this.showProgress(message)),
  last(), // return last (completed) message to caller
  catchError(this.handleError(file))
);

getEventMessage 方法解释了事件流中每种类型的 HttpEvent。

Path："app/uploader/uploader.service.ts (getEventMessage)" 。

/** Return distinct message for sent, upload progress, & response events */
private getEventMessage(event: HttpEvent<any>, file: File) {
  switch (event.type) {
    case HttpEventType.Sent:
      return `Uploading file "${file.name}" of size ${file.size}.`;


    case HttpEventType.UploadProgress:
      // Compute and show the % done:
      const percentDone = Math.round(100 * event.loaded / event.total);
      return `File "${file.name}" is ${percentDone}% uploaded.`;


    case HttpEventType.Response:
      return `File "${file.name}" was completely uploaded!`;


    default:
      return `File "${file.name}" surprising upload event: ${event.type}.`;
  }
}

本指南中的示例应用中没有用来接受上传文件的服务器。"app/http-interceptors/upload-interceptor.ts" 的 UploadInterceptor 通过返回一个模拟这些事件的可观察对象来拦截和短路上传请求。