使用不同的方法记录请求时间

在网络请求过程中，我们通常需要统计请求的时间，以评估性能并进行优化。这里有三种方法可以帮助你实现这一目标。

方法一：直接记录

直接写就是在你的请求方法中添加开始和结束时间的记录。这种方法简单直接，但是如果你有很多请求需要处理，就会有很多重复的代码。此外，这种方法不方便你对时间的统一管理和格式化。

例如：

function request() {
  const startTime = Date.now();

  // 执行请求...

  const endTime = Date.now();
  const totalTime = endTime - startTime;
  console.log("请求耗时:", totalTime, "毫秒");
}

方法二：封装函数

更好的办法是封装一个函数来处理请求时间的统计。这个函数接受一个请求函数作为参数，并返回一个新的函数。新的函数在调用原请求函数时会记录开始和结束时间，然后输出请求耗时。

例如：

function timeRequest(requestFunction) {
  return (...reset) => {
    const startTime = Date.now();

    return requestFunction(...reset).finally(() => {
      const endTime = Date.now();
      const totalTime = endTime - startTime;
      console.log([requestFunction.name, "请求耗时:", totalTime, "毫秒"]);
    });
  };
}

这种方法更加灵活和可复用，可以用于任何需要统计时间的请求函数。

方法三：使用拦截器

如果你使用的是像 Axios 这样的 HTTP 库，那么你可以利用其提供的拦截器（interceptors）来统计请求时间。在请求拦截器中，你可以记录请求开始的时间，并将这个时间保存在请求的配置（config）中。然后，在响应拦截器中，你可以获取到这个开始时间，并计算请求耗时。

这种方法的优点是它可以自动应用于所有的请求，而无需手动调用封装的函数。而且，拦截器还可以处理请求失败的情况。

例如：

// 计算并打印请求耗时的拦截器
service.interceptors.request.use(
  (config) => {
    // 记录请求开始时间
    config.startTime = Date.now();
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

service.interceptors.response.use(
  (response) => {
    // 计算请求耗时
    const endTime = Date.now();
    const totalTime = endTime - response.config.startTime;

    // 打印请求 URL 和耗时
    console.log("请求 URL:", response.config.url);
    console.log("请求耗时:", totalTime, "毫秒");

    return response;
  },
  (error) => {
    // 计算请求耗时
    const endTime = Date.now();
    const totalTime = endTime - error.config.startTime;

    // 打印请求 URL 和耗时
    console.log("请求 URL:", error.config.url);
    console.log("请求耗时:", totalTime, "毫秒");

    return Promise.reject(error);
  }
);

总的来说，选择哪种方法取决于你的具体需求和你所使用的工具。你可以根据你的应用程序来选择最适合的方法。