切换语言为:繁体

利用前端技术实现统计接口请求耗时时间

  • 爱糖宝
  • 2024-10-31
  • 2043
  • 0
  • 0

初级手段

一、使用fetch结合时间戳

  1. 在发送请求前记录当前时间戳:

    • const startTime = performance.now();

  2. 使用fetch发送请求:

    • fetch('your-api-url')

  3. 在请求的.then().catch()中记录结束时间戳并计算耗时:

.then(response => {
   const endTime = performance.now();
   const duration = endTime - startTime;
   console.log(`Request took ${duration} milliseconds.`);
   return response;
   })
.catch(error => {
   const endTime = performance.now();
   const duration = endTime - startTime;
   console.log(`Request took ${duration} milliseconds with error: ${error}`);
   });

二、使用XMLHttpRequest结合时间戳

  1. 创建XMLHttpRequest对象并记录开始时间:

const xhr = new XMLHttpRequest();
const startTime = performance.now();

  1. 配置请求并发送:

  • xhr.open('GET', 'your-api-url'); xhr.send();

  1. 在请求的onloadonerror等事件处理函数中记录结束时间并计算耗时:

xhr.onload = function () {
  const endTime = performance.now();
  const duration = endTime - startTime;
  console.log(`Request took ${duration} milliseconds.`);
};
xhr.onerror = function () {
  const endTime = performance.now();
  const duration = endTime - startTime;
  console.log(`Request took ${duration} milliseconds with error.`);
};

三、利用拦截器(axios

  1. 如果使用axios或类似的库,可以设置请求拦截器和响应拦截器:

  • 在请求拦截器中记录开始时间,在响应拦截器中记录结束时间并计算耗时。

axios.interceptors.request.use((config) => {
  config.startTime = performance.now();
  return config;
});
axios.interceptors.response.use(
  (response) => {
    const endTime = performance.now();
    const duration = endTime - response.config.startTime;
    console.log(`Request to ${response.config.url} took ${duration} milliseconds.`);
    return response;
  },
  (error) => {
    const endTime = performance.now();
    const duration = endTime - error.config.startTime;
    console.log(`Request to ${error.config.url} took ${duration} milliseconds with error.`);
    return Promise.reject(error);
  }
);

总结

上面都属于一些初级手段,因为还是在浏览器进程里面, 一旦出现长任务阻塞了浏览器, 这个统计就不太准确了。

进阶手段 - Performance API

Performance API:performance.getEntriesByType('resource') 可以获取请求资源类的资源加载情况, 里面就有

Performance API 提供了一系列的性能测量工具,可以测量网页加载和运行过程中的各种性能指标。其中,可以通过以下方式来统计网络请求的耗时:

  1. 使用performance.timing

    • performance.timing对象包含了网页加载过程中的各个时间点信息。可以通过计算不同时间点之间的差值来得到特定阶段的耗时。

    • 例如,可以计算responseEnd(服务器响应结束的时间)和requestStart(开始请求的时间)之间的差值来得到请求的耗时。

  2. 使用performance.getEntriesByType('resource')

    • 这个方法可以获取所有资源加载的性能条目。对于每个资源条目,可以获取其startTime(开始时间)和responseEnd(响应结束时间)等属性,从而计算出资源加载的耗时。

    • 可以遍历这些条目,找到特定的网络请求资源,并计算其耗时。

利用前端技术实现统计接口请求耗时时间

以下是一个示例代码:

// 遍历所有资源加载条目,找到特定请求并计算耗时
const resources = performance.getEntriesByType("resource");
for (const resource of resources) {
  // 指定请求连接诶
  if (resource.name === "https://example.com/specific-resource") {
    console.log(`Specific resource request took ${resource.duration} milliseconds.`);
    break;
  }
}

高级手段 - Web Worker

Web Worker 可以用于统计请求耗时。

以下是一种使用 Web Worker 统计请求耗时的方法:

  1. 创建一个 Web Worker 文件,例如worker.js

self.onmessage = function (event) {
  const url = event.data.url;
  const startTime = performance.now();
  fetch(url)
    .then((response) => {
      const endTime = performance.now();
      const duration = endTime - startTime;
      self.postMessage({ duration });
    })
    .catch((error) => {
      self.postMessage({ error: `Error fetching ${url}: ${error}` });
    });
};

  1. 在主页面中使用 Web Worker:

const worker = new Worker("worker.js");
const url = "your-api-url";
worker.postMessage({ url });
worker.onmessage = function (event) {
  if (event.data.duration) {
    console.log(`Request to ${url} took ${event.data.duration} milliseconds.`);
  } else {
    console.error(event.data.error);
  }
};

在这个例子中,Web Worker 负责发送请求并计算耗时,然后将结果发送回主页面。这样可以在不阻塞主页面 UI 线程的情况下进行请求耗时统计。

0条评论

您的电子邮件等信息不会被公开,以下所有项均必填

OK! You can skip this field.