Angular9 跟踪和显示请求进度

2020-07-06 15:31 更新

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

要想发出一个带有进度事件的请求,你可以创建一个 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() 方法,该方法返回一个 HttpEventsObservable(与 拦截器 部分处理过的事件相同)。

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 通过返回一个模拟这些事件的可观察对象来拦截和短路上传请求。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号