HttpClient 的一个很棒的新特性是能够监听进度事件。这可以在任何类型的请求上实现，并且在请求事件生命周期的不同阶段会提供不同的信息。以下是一个使用 GET 请求的完整示例：

import { Injectable } from '@angular/core';
import {
  HttpClient,
  HttpRequest,
  HttpEvent,
  HttpEventType
} from '@angular/common/http';

@Injectable()
export class DataService {
  url = '/some/api';

  constructor(private http: HttpClient) {}

  getData() {
    const req = new HttpRequest('GET', this.url, {
      reportProgress: true
    });

    this.http.request(req).subscribe((event: HttpEvent<any>) => {
      switch (event.type) {
        case HttpEventType.Sent:
          console.log('请求已发送！');
          break;
        case HttpEventType.ResponseHeader:
          console.log('响应头已接收！');
          break;
        case HttpEventType.DownloadProgress:
          const kbLoaded = Math.round(event.loaded / 1024);
          console.log(`下载进行中！ ${ kbLoaded }Kb 已加载`);
          break;
        case HttpEventType.Response:
          console.log('😺 完成！', event.body);
      }
    });
  }
}

• 我们首先需要通过创建 HttpRequest class 的实例并使用 reportProgress 选项来构建一个请求对象。
• 然后我们订阅请求对象以发起请求，并在请求生命周期中监听不同的事件类型。根据事件类型我们可以做出相应的反应。可用的イベント类型包括 Sent、UploadProgress、ResponseHeader、DownloadProgress、Response 和 User。
• 在上面的示例中，我们从 GET 响应中获取到目前为止已下载的数据量，而对于 POST 或 PUT 请求这样的情况，我们也可以使用类似 100 * event.loaded / event.total 的方式来获取已上传负载的百分比。这使得向用户显示进度条变得非常简单。

🤓 这篇文章涵盖了 HttpClient 的基础知识，接下来将介绍 interceptors 的使用，这是 HttpClient 的杀手级特性。你也可以前往官方文档进行更深入的学习。