Получите общее время ответа на несколько вызовов API на одной странице в angular - PullRequest
Новая
       74

Получите общее время ответа на несколько вызовов API на одной странице в angular

0 голосов
/ 06 мая 2020

Как узнать общее время отклика всех вызовов API на одной странице? Я создал interceptor, когда у меня есть один вызов API, ниже приведен код для 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: ''}

когда длина консоли I, это 0 (ноль).

Проблема: я могу см. время ответа в консоли для вызовов API, но на какой-то странице у меня есть более одного вызова API, как я могу одновременно его консоль?

Кроме того, я должен показать время ответа спереди конец. Любая помощь будет оценена по достоинству.

1 Ответ

0 голосов
/ 06 мая 2020

Вы можете создать общий объект для суммирования значений 

@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;
     }
}

Но проблема будет в следующем:

  1. Не могли бы вы определить, когда вам нужно сбросить / когда началась загрузка новой страницы?

  2. Сколько звонков нужно посчитать / когда нужно прекратить сбор и показать результат

  3. Если вам не нужен окончательный номер, но вас устраивает версия времени выполнения - используйте наблюдаемый интерфейс для подписки из вашего компонента пользовательского интерфейса

...