Axios 如何获取请求响应时间？

在使用Axios进行网络请求时，您可以通过几种方法来获取请求的响应时间。下面我会分步详细解释如何做到这一点。

方法一：使用 Axios 拦截器

Axios 拦截器是一种强大的机制，允许我们在请求的发送和响应的接收过程中介入。通过拦截器，我们可以在请求发送之前记录一个时间戳，在接收到响应后再次记录一个时间戳，然后计算两者之间的差异即可得到响应时间。

下面是一个简单的例子：

javascript
// 首先，创建一个 Axios 实例
const axiosInstance = axios.create();

// 添加请求拦截器
axiosInstance.interceptors.request.use(config => {
  // 在发送请求前，添加一个自定义属性startTime来记录请求开始时间
  config.metadata = { startTime: new Date() };
  return config;
}, error => {
  // 请求错误时做些事情
  return Promise.reject(error);
});

// 添加响应拦截器
axiosInstance.interceptors.response.use(response => {
  // 请求响应后，获取请求开始时间
  const startTime = response.config.metadata.startTime;
  // 计算响应时间
  response.duration = new Date() - startTime;
  return response;
}, error => {
  // 响应错误时做些事情
  return Promise.reject(error);
});

// 使用该 Axios 实例进行请求
axiosInstance.get('https://api.example.com/data')
  .then(response => {
    console.log(`请求响应时间为: ${response.duration}ms`);
  })
  .catch(error => {
    console.error('请求发生错误', error);
  });

在这个示例中，我们首先创建了一个新的 Axios 实例。我们添加了一个请求拦截器，在请求对象上添加了一个名为 metadata 的新属性，并设置了 startTime 来记录请求开始的时间。然后我们添加了一个响应拦截器，在其中我们可以通过 response.config.metadata.startTime 来获取请求开始的时间，并计算请求持续的时间，将其作为 response.duration 属性。

方法二：使用 Axios 请求的配置选项

除了使用拦截器，我们也可以直接在进行请求时，通过Axios请求的配置选项来记录请求的开始和结束时间：

javascript
// 记录请求开始时间
const startTime = new Date();

axios.get('https://api.example.com/data')
  .then(response => {
    // 计算请求响应时间
    const duration = new Date() - startTime;
    console.log(`请求响应时间为: ${duration}ms`);
  })
  .catch(error => {
    console.error('请求发生错误', error);
  });

这种方法更为简单直接，但如果您想在多个请求中重复此逻辑，则使用拦截器是一个更好的选择，因为您可以避免在每个请求中重复相同的代码。