如何从Axios获取响应时间？求替代axios-timing的方案

Great question! I totally get not wanting to tack on another dependency if you don’t gel with axios-timing—here are some flexible, low-fuss ways to track Axios response times without it:

This is my go-to for universal timing across all requests. You can hook into Axios' request and response interceptors to log start and end times automatically:

// Add this where you initialize Axios
axios.interceptors.request.use(config => {
  // Record start time (use performance.now() for higher precision)
  config.metadata = { startTime: performance.now() };
  return config;
});

axios.interceptors.response.use(
  response => {
    // Calculate duration and attach to response
    response.config.metadata.endTime = performance.now();
    response.duration = response.config.metadata.endTime - response.config.metadata.startTime;
    // Log or process the duration here
    console.log(`Request took ${response.duration.toFixed(2)}ms`);
    return response;
  },
  error => {
    // Don't forget to track failed requests too!
    error.config.metadata.endTime = performance.now();
    error.duration = error.config.metadata.endTime - error.config.metadata.startTime;
    console.log(`Failed request took ${error.duration.toFixed(2)}ms`);
    return Promise.reject(error);
  }
);

Pro tip: performance.now() is more accurate than Date.now() because it's not affected by system clock adjustments.

If you only need to time specific requests instead of all of them, wrap the call with manual timestamping:

const fetchData = async () => {
  const startTime = performance.now();
  try {
    const response = await axios.get('/api/data');
    const duration = performance.now() - startTime;
    console.log(`GET /api/data took ${duration.toFixed(2)}ms`);
    return response;
  } catch (error) {
    const duration = performance.now() - startTime;
    console.log(`GET /api/data failed after ${duration.toFixed(2)}ms`);
    throw error;
  }
};

This is perfect for one-off cases where global interceptors feel overkill.

If you want reusable timing logic without polluting the global Axios instance, create a custom instance with interceptors baked in:

const timedAxios = axios.create();

// Add the same interceptor logic as above to the custom instance
timedAxios.interceptors.request.use(config => {
  config.metadata = { startTime: performance.now() };
  return config;
});

timedAxios.interceptors.response.use(
  response => {
    response.duration = performance.now() - response.config.metadata.startTime;
    console.log(`Request to ${response.config.url} took ${response.duration.toFixed(2)}ms`);
    return response;
  },
  error => {
    error.duration = performance.now() - error.config.metadata.startTime;
    console.log(`Failed request to ${error.config.url} took ${error.duration.toFixed(2)}ms`);
    return Promise.reject(error);
  }
);

// Use the timed instance for requests that need timing
timedAxios.get('/api/important-data');

This keeps your main Axios instance clean while giving you a dedicated tool for timed requests.

All these methods let you control exactly how you log or use the response time data—no external dependencies required.

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