Connaître le temps passé par une requête API en vol - Angular 9

Question

J'essaie d'intercepter les requêtes dans angular pour savoir si l'API prend plus de 5 secondes en vol. Si l'API prend plus de 5 secondes, un message doit être affiché comme "Requête en cours, cela va prendre un peu de temps".

Je suis en mesure de calculer le temps pris par l'API après avoir obtenu la réponse ci-dessous :

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const startTimestamp = +new Date().getTime();
    return next.handle(req).pipe(
      tap(
          (evt: HttpEvent<any>) => {
             const endTimestamp: number = +new Date().getTime();
             // get the difference
             const responseTimes = (endTimestamp - startTimestamp) / 1000;
             console.log(`Request took ${responseTimes} ms`);
          }
      )
}

Cependant, je souhaite connaître le temps pendant lequel la requête est en vol. Toute piste sera appréciée.

Answer 1

Je pense que l'utilisation d'un setInterval répondrait à votre question : (ceci vérifierait le temps passé au début de la requête et le temps actuel toutes les 10 ms)

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const t0 = performance.now();
    let interval;

    console.log('processing request', request);
    interval = setInterval(() => {
      const t1 = performance.now();
      const responseTime = (t1 - t0) / 1000;
      console.log(`Request took ${responseTime} ms since start`);
    }, 10);

    return next.handle(request).pipe(
      tap((ev: HttpEvent<any>) => {
        if (ev instanceof HttpResponse) {
          console.log('processing response', ev);
        }
      }),
      catchError((response) => {
        if (response instanceof HttpErrorResponse) {
          console.log('processing http error', response);
        }

        return Observable.throw(response);
      }),
      finalize(() => {
        const t1 = performance.now();
        const totalResponseTime = (t1 - t0) / 1000;
        console.log(`Request finished: took ${totalResponseTime} ms`);

        clearInterval(interval);
      }),
    );
  }
}

lien de démonstration