axios 给每一个请求添加耗时统计

如果你想在使用 axios 发送请求时统计请求的耗时，可以使用 axios 的拦截器来实现。

首先，在发送请求之前，你可以在拦截器中记录下请求开始的时间，然后在请求完成之后，再在拦截器中计算出请求的耗时。

例如，你可以使用如下代码来实现请求耗时的统计：

// 记录请求开始的时间
const start = Date.now()

// 在请求完成之后，计算请求的耗时
axios.interceptors.response.use(response => {
  const end = Date.now()
  const elapsed = end - start
  console.log(`请求耗时：${elapsed}ms`)
  return response
})

如果你的应用场景中存在多个请求并发的情况，那么上面的代码可能会出现问题，因为它只能处理单个请求的耗时。为了解决这个问题，你可以在发送请求时，为每个请求附带一个唯一的标识，然后在拦截器中，通过这个标识来统计每个请求的耗时。

下面是一个完整的例子，它使用 axios 的拦截器来实现对请求耗时的统计：

// 用于存储每个请求的耗时信息
const requestTiming = {}

// 生成唯一标识
function generateRequestId() {
  return Math.random().toString(36).substr(2)
}

// 记录请求开始的时间
axios.interceptors.request.use(config => {
  const requestId = config.headers['X-Request-Id']
  if (!requestId) {
    // 如果请求中没有携带 X-Request-Id 字段，则为该请求生成一个唯一标识
    config.headers['X-Request-Id'] = generateRequestId()
  }
  requestTiming[config.headers['X-Request-Id']] = Date.now()
  return config
})

// 在请求完成之后，计算请求的耗时
axios.interceptors.response.use(response => {
  const requestId = response.headers['X-Request-Id']
  const start = requestTiming[requestId]
  if (start) {
    const end = Date.now()
    const elapsed = end - start
    console.log(`请求（ID: ${requestId}）耗时：${elapsed}ms`)
    delete requestTiming[requestId]
  }
  return response
})

// 发送请求
axios.get('https://www.example.com/')
  .then(response => {
    console.log(response.data)
  })