Angular拦截器中获取HTTP请求实际耗时的解决方案问询

你的问题核心在于冷Observable的特性：next.handle(req)返回的是一个冷Observable，它不会立即发起请求，只有当这个Observable被订阅时，实际的HTTP请求才会触发。你当前代码里的const start = Date.now()是在拦截器返回Observable时执行的，而非请求真正发起的时间，所以统计出的1-2ms只是从Observable创建到响应被处理的间隔，和实际网络请求耗时完全不符。

这里给你一个准确统计请求耗时的方案，完全符合你的linting要求（不用console.time()）：

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  defer,
  finalize
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class TimingInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 使用defer推迟起始时间的记录，直到Observable被订阅（即请求真正发起时）
    return defer(() => {
      const startTime = Date.now();
      return next.handle(request).pipe(
        // finalize会在请求完成（无论成功/失败）时执行，确保能统计到完整耗时
        finalize(() => {
          const duration = Date.now() - startTime;
          console.log(`Request to ${request.urlWithParams} took ${duration}ms`);
        })
      );
    });
  }
}

为什么这个方案有效： #

• defer()操作符会延迟内部Observable的创建逻辑，直到订阅发生。这意味着startTime的记录时机正好是HTTP请求开始发起的时刻，和浏览器网络面板的请求起始时间完全对齐。
• finalize()操作符会在整个Observable流结束时触发，不管请求是成功完成还是出错终止，这样你不会漏掉任何请求的耗时统计。
• 用Date.now()计算时间差，完全避开了console.time()，符合你的linting规则。

如果需要区分成功和失败的请求耗时，也可以在pipe里加上tap分别处理：

return defer(() => {
  const startTime = Date.now();
  return next.handle(request).pipe(
    tap({
      next: (res) => {
        const duration = Date.now() - startTime;
        console.log(`Success request to ${request.urlWithParams} took ${duration}ms`);
      },
      error: (err) => {
        const duration = Date.now() - startTime;
        console.log(`Failed request to ${request.urlWithParams} took ${duration}ms`);
      }
    })
  );
});

不过这种情况下，如果请求出错，finalize仍然会执行，所以如果不需要分别统计，用finalize会更简洁。

内容的提问来源于stack exchange，提问作者user4676340