Vue 请求封装怎么实现接口请求耗时的性能监控与日志打印-Vue.js-PHP中文网

vue项目中接口请求耗时监控和日志打印是封装axios请求层时可顺手实现的基础能力，通过请求/响应拦截器记录时间戳、生成唯一reqid、利用config.meta存储元数据，并结合console.groupcollapsed格式化输出，支持慢请求上报及链路追踪联动。

vue 请求封装怎么实现接口请求耗时的性能监控与日志打印

在 Vue 项目中，接口请求耗时监控和日志打印不是“额外功能”，而是封装请求层时顺手就能加上的基础能力。核心思路是：利用 Axios 拦截器记录时间戳，在请求发出前打起点，响应返回后算差值，并按需输出或上报。

请求开始前记录起始时间

在请求拦截器中，为每个请求生成唯一 ID（如 `Date.now() + Math.random()`），并把当前时间存入 config.meta 字段——这是 Axios 官方支持的自定义元数据容器，不会发到服务端，专为前端逻辑设计。

示例代码：

service.interceptors.request.use(config => {
  config.meta = config.meta || {}
  config.meta.startTime = Date.now()
  config.meta.reqId = `${Date.now()}-${Math.random().toString(36).substr(2, 6)}`
  return config
})

响应返回后计算耗时并打印日志

在响应拦截器（含错误响应）中读取 config.meta.startTime，与当前时间做差，得到毫秒级耗时。再结合 URL、状态码、是否成功等信息，统一格式化输出。

建议用 console.groupCollapsed 分组显示，便于折叠查看：

Vue-router参考手册

Vue-router参考手册下载

下载

service.interceptors.response.use(
  response => {
    const { config, status } = response
    const duration = Date.now() - (config.meta?.startTime || Date.now())
    console.groupCollapsed(`✅ ${config.url} | ${status} | ${duration}ms`)
    console.log('Request:', { url: config.url, method: config.method, params: config.params, data: config.data })
    console.log('Response:', response.data)
    console.groupEnd()
    return response
  },
  error => {
    const { config } = error
    const duration = Date.now() - (config.meta?.startTime || Date.now())
    console.groupCollapsed(`❌ ${config.url} | ${error.code || 'Network'} | ${duration}ms`)
    console.warn('Request failed:', { url: config.url, method: config.method })
    console.error('Error:', error)
    console.groupEnd()
    return Promise.reject(error)
  }
)