知道 API 请求在飞行中花费的时间 - Angular 9

Question

我正在尝试拦截 angular 中的请求，以了解 API 是否在飞行中花费了超过 5 秒。如果 API 花费的时间超过 5 秒，则需要显示一条消息，例如 'Request in progress, it will take a short while'

我能够计算出 API 在收到如下回复后花费的时间：

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`);
          }
      )
}

但是，我想知道请求进行中的时间。任何线索将不胜感激。

Answer 1

我认为使用 setInterval 可以满足您的问题：（这将每 10 毫秒检查一次请求开始时花费的时间和当前时间）

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

demo link

知道 API 请求在飞行中花费的时间 - Angular 9

Know the time spent by API request in flight - Angular 9

progress-bar

angular-http-interceptors

angular