Axios响应时间拦截器导入后失效问题求助

核心问题分析 #

你的拦截器失效源于三个关键错误：

• 时间记录时机错误：原代码把请求开始时间的记录逻辑放在响应拦截器中，此时已处于请求结束阶段，时间计算完全失效，且无法传递到后续处理环节。
• 拦截器注册格式错误：原logResponseTimeInterceptor将成功/错误回调用括号包裹，导致Axios无法正确识别错误处理逻辑。
• 数据存储位置错误：在响应拦截器中修改response.meta，但请求开始时间应存储在请求阶段的config.meta中——响应对象的config会携带请求时的完整配置，才能在后续计算耗时。

修复后的完整代码 #

logTimeInterceptor.js #

// 记录请求开始时间 - 必须绑定到请求拦截器
export const recordRequestStartTime = (config) => {
  // 避免覆盖已有meta对象
  config.meta = config.meta || {}
  config.meta.requestStartedAt = new Date().getTime()
  return config
}

// 成功响应的耗时日志
export const logSuccessResponseTime = (response) => {
  const duration = new Date().getTime() - response.config.meta.requestStartedAt
  console.log(`📡 API | ${response.config.url} 响应耗时: ${duration} ms`)
  return response
}

// 失败响应的耗时日志
export const logErrorResponseTime = (error) => {
  // 加边界判断，避免请求未走到时间记录环节就报错
  if (error.config?.meta?.requestStartedAt) {
    const duration = new Date().getTime() - error.config.meta.requestStartedAt
    console.error(`📡 API | ${error.config.url} 请求失败，耗时: ${duration} ms`)
  }
  throw error
}

httpClient.js #

import axios from 'axios'
import { ApiSettings } from '@/api/config'
import {
  recordRequestStartTime,
  logSuccessResponseTime,
  logErrorResponseTime
} from '@/api/interceptors/logTimeInterceptor'

const httpClient = axios.create(ApiSettings)

// 先注册请求拦截器，确保请求发出前记录开始时间
httpClient.interceptors.request.use(recordRequestStartTime)
// 注册响应拦截器：第一个参数处理成功响应，第二个处理失败响应
httpClient.interceptors.response.use(logSuccessResponseTime, logErrorResponseTime)

// 正常注册你的auth拦截器（请求拦截器按注册顺序执行，可根据业务调整顺序）
httpClient.interceptors.request.use(authInterceptor)

export default httpClient

关键修复说明 #

• 请求阶段记录时间：将开始时间存在config.meta中，确保请求成功/失败时都能获取到这个时间戳。
• 规范拦截器注册：严格遵循Axios的API格式，response.use(成功回调, 错误回调)无需额外包裹。
• 错误处理边界防护：避免因请求提前失败（如配置错误、请求被取消）导致的undefined报错。

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