异步获取文件修改时间：告别同步XHR，拥抱现代Web请求

· 日常编程 · 158576

本文旨在解决JavaScript中同步XMLHttpRequest（XHR）导致的性能问题，特别是当需要周期性获取服务器文件最后修改时间时。我们将深入探讨同步XHR的弊端，并提供两种现代且高效的异步解决方案：基于事件的异步XHR和基于Promise的Fetch API。通过代码示例和详细解释，读者将学会如何将阻塞的同步请求转换为非阻塞的异步操作，从而优化用户体验并遵循Web标准。

1. 同步XMLHttpRequest的弊端

在Web开发中，执行HTTP请求是常见的操作。传统的XMLHttpRequest对象提供了发起这些请求的能力。然而，当XMLHttpRequest.open()方法的第三个参数设置为false时，请求会以同步方式执行。这意味着JavaScript代码会暂停执行，直到服务器响应返回，这会阻塞浏览器的主线程，导致用户界面（UI）无响应，给用户带来卡顿的体验。现代浏览器普遍对主线程上的同步XHR发出警告，甚至在未来可能完全禁止，因为它严重损害了用户体验。

例如，以下代码片段展示了一个同步请求的典型模式，用于获取文件的Last-Modified头部信息：

function fetchHeader(url, wch) {
    try {
        var req = new XMLHttpRequest();
        req.open("HEAD", url, false); // 'false' 表示同步请求
        req.send(null);
        if (req.status == 200) {
            return req.getResponseHeader(wch);
        } else {
            return false;
        }
    } catch (er) {
        return er.message;
    }
}

这种模式在周期性检查文件修改时间时尤其有害，因为每次检查都会导致UI短暂冻结。

2. 异步XMLHttpRequest的实现

为了解决同步XHR的问题，我们必须采用异步请求。异步XHR通过事件监听器在请求状态变化时触发回调函数，从而允许JavaScript主线程继续执行其他任务。

以下是将上述同步XHR转换为异步版本的实现：

const pageload = new Date(); // 页面加载时间
const url = "Akut.txt"; // 目标文件URL
const whichHeader = "Last-Modified"; // 需要获取的头部信息

// 比较时间并更新UI的函数
const compareTimeToNow = (time) => {
  let d = new Date();
  let diffSec = Math.round((d - time) / 1000); // 计算与上次修改的秒数差
  document.getElementById("time").textContent = Math.trunc(diffSec / 60) + " minutes"; // 更新显示为分钟

  // 如果页面加载超过10秒且文件在5秒内有修改，则重新加载页面
  if ((d - pageload) / 1000 > 10 && diffSec  {
  const req = new XMLHttpRequest();
  // 监听 'load' 事件，当请求成功完成时触发
  req.addEventListener("load", reqListener);
  // 'true' 是默认值，表示异步请求
  req.open("HEAD", url);
  req.send();
};

// 首次调用以启动流程
getHeader();

代码解析：

  • req.open("HEAD", url)：省略第三个参数，默认为true，表示发起异步请求。
  • req.addEventListener("load", reqListener)：当请求成功完成（状态码2xx）时，load事件会被触发，reqListener函数执行。这比onreadystatechange更简洁，因为它只关注最终成功的结果。
  • reqListener函数：在此函数中，我们通过this.getResponseHeader(whichHeader)获取到Last-Modified头部的值，并将其转换为Date对象的时间戳，然后传递给compareTimeToNow进行处理。
  • compareTimeToNow函数：负责计算时间差、更新DOM，并根据业务逻辑决定是否重新加载页面。如果不需要重新加载，它会使用setTimeout来安排下一次getHeader的调用，从而实现周期性检查，而不是阻塞循环。

3. 使用Fetch API进行异步请求

Fetch API是现代Web平台提供的另一个强大且更推荐的HTTP请求接口。它基于Promise，提供了更简洁、更强大的请求和响应处理能力，能够更好地与异步编程模式（如async/await）结合。

以下是使用Fetch API实现相同功能的代码：

const pageload = new Date(); // 页面加载时间
const url = "Akut.txt"; // 目标文件URL
const whichHeader = "Last-Modified"; // 需要获取的头部信息

// 比较时间并更新UI的函数（与XHR版本相同）
const compareTimeToNow = (time) => {
  let d = new Date();
  let diffSec = Math.round((d - time) / 1000);
  document.getElementById("time").textContent = Math.trunc(diffSec / 60) + " minutes";

  if ((d - pageload) / 1000 > 10 && diffSec  {
  fetch(url, { method: 'HEAD' }) // 默认是GET，需要显式指定HEAD方法
    .then(rsp => {
      // Fetch API的响应对象包含一个headers属性，它是一个Headers对象
      // 可以通过rsp.headers.get()方法获取特定头部
      return new Date(rsp.headers.get(whichHeader)).getTime();
    })
    .then(time => compareTimeToNow(time)) // 获取时间戳后传递给compareTimeToNow
    .catch(error => console.error('Error fetching header:', error)); // 错误处理
};

// 首次调用以启动流程
getHeader();

代码解析：

  • fetch(url, { method: 'HEAD' })：发起一个HEAD请求。fetch函数返回一个Promise，该Promise在收到响应头部时解析为一个Response对象。
  • .then(rsp => ...)：当Promise解析时，我们得到Response对象rsp。rsp.headers是一个Headers对象，提供了get()方法来获取特定的头部信息。
  • .then(time => compareTimeToNow(time))：获取到时间戳后，将其传递给compareTimeToNow函数。
  • .catch(error => ...)：Fetch API的错误处理通过Promise的.catch()方法进行，这使得错误处理更加集中和清晰。

4. 最佳实践与注意事项

  1. 始终使用异步请求：避免在主线程上使用同步XHR。对于所有HTTP请求，都应优先考虑异步方法，无论是XHR的事件监听器还是Fetch API的Promise。
  2. 错误处理：在异步请求中，错误处理至关重要。对于XHR，可以监听error事件；对于Fetch API，使用.catch()方法来捕获网络错误或响应处理中的异常。
  3. 周期性请求的优化：

    • 轮询（Polling）：如示例所示，使用setTimeout或setInterval进行周期性请求是一种常见的轮询方式。
    • 长轮询（Long Polling）/WebSockets：对于需要更实时或更频繁更新的场景，可以考虑长轮询或WebSockets。WebSockets提供全双工通信，是实现实时应用（如聊天、通知）的理想选择，但实现复杂度更高。
  4. 浏览器兼容性：Fetch API在现代浏览器中得到了广泛支持（Chrome 42+, Edge 14+, Safari 10.1+, Firefox 39+, Opera 29+），但不支持IE浏览器。如果需要支持旧版IE，可能仍需使用异步XHR。
  5. 资源管理：即使是异步请求，过于频繁的请求也可能消耗用户带宽和服务器资源。合理设置轮询间隔，或考虑服务器推送技术，可以更有效地管理资源。

总结

从同步XMLHttpRequest到异步XHR，再到现代的Fetch API，Web请求技术一直在不断演进，以提供更好的性能和开发体验。通过本文的介绍和代码示例，我们强调了异步请求的重要性，并提供了两种可靠的解决方案来获取文件修改时间，同时保持用户界面的响应性。在新的项目中，强烈推荐使用Fetch API，因为它提供了更简洁、更强大的API，与现代JavaScript的异步编程范式完美契合。理解并应用这些异步模式，是构建高性能、用户友好型Web应用的关键。

以上就是异步获取文件修改时间：告别同步XHR，拥抱现代Web请求的详细内容，更多请关注骃骐网【www.myinqi.com】。

相关推荐：

如何高效流式读取大型CSV文件并异步发送HTTP请求

本文介绍针对20GB级CSV文件的内存友好型流式处理方案，通过csv.DictReader逐行解析、aiohttp并发控制与XML模板填充，实现低内存占用、高吞吐量的HTTP批量提交。 本文介绍针对20gb级csv文件的内存友好型流式处理方案，通过`csv.dictreader`逐行解析、`aiohttp`并发控制与xml模板填充，实现低内存占用、高吞吐量的http批量提交。 处理超大CSV文件（...

如何解决Python爬虫请求频繁被重定向的问题_设置allow_redirects参数

requests.get() 默认自动跳转（allow_redirects=True）会导致爬虫失效，因反爬系统常利用301/302跳转至验证码页或空页，使你无法获取原始响应头和状态码，进而中断后续逻辑。 为什么 requests.get() 默认会自动跳转，反而导致爬虫失效 因为 requests 默认开启重定向追踪（allow_redirects=True），遇到 301、302 响应时会自动...

如何解决Python爬虫在长连接请求中超时的问题_设置合理的timeout参数与重试机制

requests.get()默认不设超时会无限等待，必须用timeout=(connect, read)元组分别控制连接与读取超时，单数值仅作用于读取阶段，连接阶段仍可能卡死。 requests.get() 默认不设超时，长连接请求卡住几小时都可能不报错——必须显式设置 timeout，且不能只填一个数字。 为什么单个 timeout 数值对长连接无效 requests 的 timeout 参数若...

如何在Flask中集成百度地图API_通过Python后端转发请求处理跨域

前端不能直接调用百度地图API，因为AK必须绑定域名白名单，写在前端会暴露密钥导致盗用、配额超限或封禁；后端转发核心是保护密钥，而非绕过跨域，所有带AK的接口均需服务端中转。 为什么不能让前端直接调用百度地图API 因为百度地图JavaScript API强制要求使用ak（Access Key）且该密钥**仅限绑定域名白名单**，而一旦把ak写在前端代码里，就等于公开暴露——别人抓包就能盗用，触发...

TensorFlow怎么在多GPU下同步梯度_Python利用MirroredStrategy实现

MirroredStrategy的梯度同步并非真正“自动完成”，因其依赖严格的作用域约束：模型构建、编译、数据集分发（需experimental_distribute_dataset）、训练执行（fit或自定义循环）均须在strategy.scope()内，否则梯度无法被策略接管而致同步失效。 为什么 MirroredStrategy 的梯度同步不是“自动完成”的？ TensorFlow 的 Mi...

Python爬虫怎么抓取动态更新的API数据_使用轮询机制请求接口

轮询前需先判断接口是否真需轮询：若API支持增量拉取（如含timestamp参数或last_updated字段）或缓存机制（ETag/If-Modified-Since），应优先采用；否则才考虑轮询，并需封装为可中断、带重试、超时控制与随机抖动的健壮循环。 轮询接口前先确认它是否真需要轮询 很多所谓“动态更新”的数据，其实只是前端用 fetch 或 axios 调了后端 API，而这个 API 本...

Python中如何实现异步DNS解析_通过aiodns提升大规模并发请求效率

aiodns 因底层基于 c-ares 实现纯异步 DNS 查询，不依赖系统 getaddrinfo，故在高并发下更可控稳定；而 asyncio.getaddrinfo 在 Linux 等平台常同步阻塞，易卡住事件循环，导致延迟突增、CPU 升高。 aiodns 是目前 Python 中最轻量、最直接支持异步 DNS 解析的第三方库，它底层封装了 c-ares，不依赖事件循环的 DNS 实现（比如...

怎样在Python Flask中获取Header请求头信息_使用request.headers

在Flask中应使用request.headers.get("Header-Name")安全读取请求头，该对象大小写不敏感、类字典，键不存在时返回None；自定义头需确保代理（如Nginx）透传，调试时可用dict(request.headers)打印全部头信息。 如何在Flask中正确读取 request.headers request.headers 是一个类字典对象（Headers 类型），...