正文

JavaScript中获取请求所用时间的方法：记录请求发送和响应接收的时间，计算差值。例如，使用`fetch` API发起请求，获取请求开始和结束的时间戳，然后计算它们之间的差值。

/0 浏览量
0602

在JavaScript中，记录网络请求所用的时间是一项常见的任务。这可以帮助开发者了解应用的性能，优化用户体验。以下是如何使用fetch API发起请求，并记录请求发送和响应接收的时间，从而计算请求所用时间的方法。

使用fetch API发起请求

fetch API是现代浏览器提供的一个用于发起网络请求的接口。它基于Promise设计，使得异步请求的处理更加简洁。

// 定义一个函数，用于发起请求并返回Promise
function fetchData(url) {
  return fetch(url).then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  });
}

获取请求开始和结束的时间戳

为了计算请求所用时间，我们需要记录请求发送和响应接收的时间戳。这可以通过performance.now()方法实现，它返回自页面加载以来经过的毫秒数。

// 记录请求发送前的时间戳
const startTime = performance.now();

// 发起请求
fetchData('https://api.example.com/data')
  .then(data => {
    // 记录请求结束后的时间戳
    const endTime = performance.now();

    // 计算请求所用时间
    const duration = endTime - startTime;
    console.log(`请求所用时间：${duration}毫秒`);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

计算请求所用时间

在上面的示例中，我们使用startTime和endTime变量分别存储请求发送和响应接收的时间戳。通过计算这两个时间戳的差值，我们可以得到请求所用的时间（以毫秒为单位）。

总结

通过记录请求发送和响应接收的时间戳，并计算它们之间的差值，我们可以轻松地获取JavaScript中网络请求所用的时间。这种方法可以帮助开发者优化应用性能，提升用户体验。

-- 展开阅读全文 --