JavaScript 中 Ajax 怎么在全局拦截器中统一添加时间戳防止缓存污染-js教程-PHP中文网

javascript中防ajax缓存需在请求url末尾添加毫秒级时间戳，推荐通过重写window.fetch、axios拦截器或patch xmlhttprequest.open统一处理，仅对get/head请求且无t参数时注入。

javascript 中 ajax 怎么在全局拦截器中统一添加时间戳防止缓存污染

在 JavaScript 中，Ajax 请求默认可能被浏览器缓存（尤其是 GET 请求），导致获取到过期数据。为防止缓存污染，常见做法是在 URL 后追加时间戳（如 ?t=1715823456789）。若项目中大量使用原生 fetch 或 XMLHttpRequest，手动加时间戳易遗漏；推荐在全局拦截层统一处理。

使用 fetch 全局拦截（推荐）

现代项目多用 fetch，可通过重写全局 window.fetch 实现统一注入时间戳：

只对 GET、HEAD 等幂等请求添加时间戳，避免影响 POST/PUT 等带 body 的请求
不修改已有查询参数，仅在无重复 t 参数时追加
确保时间戳是毫秒级，且每次请求独立生成（不能复用）

示例代码：

// 保存原始 fetch
const originalFetch = window.fetch;

window.fetch = function(url, options = {}) {
  // 只处理 GET/HEAD 请求
  const method = (options.method || 'GET').toUpperCase();
  if (!['GET', 'HEAD'].includes(method)) {
    return originalFetch(url, options);
  }

  // 解析 URL，安全添加 t 参数
  const urlObj = new URL(url, window.location.origin);
  if (!urlObj.searchParams.has('t')) {
    urlObj.searchParams.set('t', Date.now().toString());
  }

  return originalFetch(urlObj.toString(), options);
};

适配 axios 的请求拦截器

若项目使用 axios，更简洁的方式是配置请求拦截器：

利用 config.url 和 config.params 统一注入
避免覆盖用户已传的 params.t，可设为“仅当未提供时补充”
注意：GET 请求的参数优先级为 params > URL 查询字符串

示例：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

axios.interceptors.request.use(config => {
  if (['get', 'head'].includes(config.method?.toLowerCase())) {
    config.params = {
      ...config.params,
      t: config.params?.t ?? Date.now()
    };
  }
  return config;
});

兼容 XMLHttpRequest 的全局 patch

针对老项目仍大量使用 XMLHttpRequest 的场景，可劫持 open 方法：

监听 GET 请求，在调用 open 前改写 URL
需判断是否已含 t=，避免重复添加
注意：不要影响非 GET 请求，也不应修改 POST 的 URL（body 才是数据主体）

示例：

const originalOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
  if (/^(get|head)$/i.test(method)) {
    const urlObj = new URL(url, document.baseURI);
    if (!urlObj.searchParams.has('t')) {
      urlObj.searchParams.set('t', Date.now());
    }
    url = urlObj.toString();
  }
  return originalOpen.call(this, method, url, async, user, password);
};