跨文件调用Axios请求时，如何获取请求发起时刻的时间？

要获取调用WebService的时刻（发起HTTP请求的时间点），无需等待响应返回，可通过修改getRequest函数，让它同时返回请求开始时间和响应结果。具体实现如下：

1. 修改Request.js中的getRequest函数 #

调整逻辑，在发起请求前记录时间，最后返回包含开始时间和响应的对象：

export const getRequest = async (url, baseURL, headers) => {
  // 记录调用WebService的时刻（发起请求前）
  const requestStartTime = new Date().getTime();
  const HTTP = axios.create({
    baseURL,
    headers,
  });

  // 保留拦截器计算请求耗时（可选）
  HTTP.interceptors.response.use((response) => {
    const currentTime = new Date().getTime();
    response.headers["request-duration"] = currentTime - requestStartTime;
    return response;
  });

  const response = await HTTP.get(url);
  // 返回包含开始时间和响应的对象
  return {
    response,
    requestStartTime
  };
};

2. 在Users.vue中获取开始时间 #

调用getRequest后直接解构出开始时间使用：

async getUsers() {
  try {
    let url = `/users`;
    let baseUrl = `baseURL`;
    let headers = {};
    // 解构拿到响应和请求开始时间
    const { response: responseUsers, requestStartTime } = await getRequest(url, baseUrl, headers); 
    
    // 直接使用请求开始时间
    console.log("调用WebService的时刻（毫秒时间戳）：", requestStartTime);
    // 依然可以获取计算好的请求耗时
    console.log("请求耗时（毫秒）：", responseUsers.headers["request-duration"]);

    if (responseUsers.status === 200) {
      const { data } = responseUsers;
      this.users = data;
    }
  } catch (error) {
    console.error(error);
  }
}

额外优化：复用axios实例 #

若应用频繁调用getRequest，每次创建新axios实例会造成性能开销，可抽离实例创建逻辑复用：

// 抽离axios实例创建逻辑
const createAxiosInstance = (baseURL, headers) => {
  return axios.create({
    baseURL,
    headers,
  });
};

export const getRequest = async (url, baseURL, headers) => {
  const requestStartTime = new Date().getTime();
  const HTTP = createAxiosInstance(baseURL, headers);
  
  HTTP.interceptors.response.use((response) => {
    const currentTime = new Date().getTime();
    response.headers["request-duration"] = currentTime - requestStartTime;
    return response;
  });
  
  const response = await HTTP.get(url);
  return { response, requestStartTime };
};

内容的提问来源于stack exchange，提问作者TAHER El Mehdi