前端 获取API的响应时间 的方法总结

进入正文之前需要了解的概念：

• API请求时间：指从发送API请求到接收到响应所经过的时间。
• 网络延迟：指数据从发送端到接收端所需的时间，受网络质量和距离等因素影响。
• 服务器处理时间：指服务器处理请求所需的时间，包括数据库查询、计算等操作。
• 数据传输时间：指数据在网络中传输所需的时间，受网络带宽和数据量等因素影响。

前端获取API响应时间的方法有多种途径，以下是其中三种常见的方法：

1. Performance API：使用浏览器提供的Performance API可以获取到页面加载和执行的性能数据，包括API请求的响应时间。可以通过以下代码来获取API请求的响应时间：

   const startTime = performance.now();
   fetch('https://api.example.com/data')
     .then(response => {
       const endTime = performance.now();
       const responseTime = endTime - startTime;
       console.log('API响应时间：', responseTime);
       return response.json();
     })
     .then(data => {
       // 处理API响应数据
     });

2. XHR对象：通过XMLHttpRequest对象发送API请求，并在请求完成时计算响应时间。以下是一个简单的示例：

   const xhr = new XMLHttpRequest();
   const startTime = new Date().getTime();
   xhr.open('GET', 'https://api.example.com/data', true);
   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4 && xhr.status === 200) {
       const endTime = new Date().getTime();
       const responseTime = endTime - startTime;
       console.log('API响应时间：', responseTime);
       // 处理API响应数据
     }
   };
   xhr.send(