获得一页上多个api调用的总响应时间（以角度为单位）>

Question

如何获得一页上所有API调用的总响应时间？我只有一个API调用时就创建了interceptor，以下是interceptor的代码：

httpconfig.interceptor.ts：

import { Injectable } from '@angular/core'; 
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse, HttpResponse } from '@angular/common/http'; 
import { Observable, throwError } from 'rxjs'; 
import { tap } from "rxjs/operators"; 
import { Router } from '@angular/router';

@Injectable() 
export class TokenInterceptor implements HttpInterceptor {

  constructor(private router: Router, private perfromancetesting: PerformancetestService) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
      headers: request.headers.set('startTimestamp', startTimestamp.toString())
    });

    const startTime = Date.now();
    return next.handle(request).pipe(tap((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
          if(event.status === 200) {
            let elapsedTime = Date.now() - startTime;
            this.perfromancetesting.setTime(startTime, Date.now(), elapsedTime, event.url);
            const message = "Page load completed in " + elapsedTime + " ms";
            this.logDetails(message);
        }
      }
    }, (err: any) => {
      if (err instanceof HttpErrorResponse) {
        if (err.status === 401) {
          // redirect to the login route
          // or show a modal
        }
      }
    }));   
}  

 private logDetails(msg: string) {
    console.log(msg);   
   } 
}
performancetesting.service.ts：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class PerformancetestService {

  responseTimeArray = [];

  constructor() { }

  setTime(start, end, total, url) {
    this.responseTimeArray.push({ starttime: start, endtime: end, totaltime: total, url: url });
  }

  getTime() {
    return this.responseTimeArray;
  }

}
home.component.ts：

constructor(private perfromancetesting: PerformancetestService) {
   this.perfromancetesting.responseTimeArray = [];
}

ngAfterViewInit() {
    let pageLoadTime = this.perfromancetesting.getTime();
    console.log("Home: ", pageLoadTime);
}
在控制台中，我收到如下消息：

Home:[]
     0: {starttime: 43243, endtime: 4545, totaltime: 5210, url: ''}
     1: {starttime: 4152, endtime: 6396, totaltime: 7854, url: ''}
当我控制台长度为0（零）时。

问题：我可以在控制台中看到API调用的响应时间，但是在某些页面上我有多个API调用，如何立即对其进行控制台？

而且，我必须在前端显示响应时间。任何帮助将不胜感激。

如何获得一页上所有API调用的总响应时间？我只有一个API调用时就创建了拦截器，以下是拦截器的代码：httpconfig.interceptor.ts：import {Injectable} ...

Answer 1

您可以创建一个共享的对象来汇总值