以角度获取一页上多个 api 调用的总响应时间答案

【问题标题】：Get total response time of multiple api calls on one page in angular以角度获取一页上多个 api 调用的总响应时间
【发布时间】：2020-05-06 05:31:38
【问题描述】：

如何获得一页上所有 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 调用，我如何才能一次对其进行控制台？

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

【问题讨论】：

ngAfterInit 不保证 api 调用完成
这可以帮助stackoverflow.com/questions/32460602/…

标签： angular api httpresponse router response-time

【解决方案1】：

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

@Injectable() 
export class Collector {
     addTime(time) {
         this.all_time+=time;
         this.all_time_tr.next(this.all_time);
     }
     getTime(): number;
     reset();
     getCurrentTime(): Observable<number>   <<< for runtime observation
     {
        return this.all_time_rt;
     }
}

但问题是：

您能否确定何时需要重置/何时开始加载新页面？
您需要计算多少次呼叫/何时需要停止收集并显示结果
如果您不需要最终数字但对运行时版本感到满意 - 使用可观察接口从您的 UI 组件订阅

【讨论】：