如何跟踪Angular HTTP POST调用进度

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

postData(url: string, body: any) {
  return this.http.post(url, body);
}

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

export class ProgressInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const progress = {
      loaded: 0,
      total: 0
    };

    const cloneReq = req.clone({
      reportProgress: true
    });

    return next.handle(cloneReq).pipe(
      tap(event => {
        if (event.type === HttpEventType.UploadProgress) {
          progress.loaded = event.loaded;
          progress.total = event.total;
          // 进度更新操作
        }
      })
    );
  }
}

import { HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ProgressInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }