js请求避免缓存的三种方式

要确保每次请求都获取最新的资源,而不是从浏览器缓存中读取旧的版本,可以采取以下几种方式:

方法一:在 URL 上添加随机查询参数(推荐)

这是最简单有效的方式之一。通过为请求的 URL 添加一个随机参数(如时间戳或随机字符串),可以绕过浏览器缓存。

js 复制代码
export async function fetchRemoteJSAsText(url) {
    try {
        // 添加时间戳参数避免缓存
        const cacheBusterUrl = `${url}${url.includes('?') ? '&' : '?'}t=${Date.now()}`;
        
        const response = await fetch(cacheBusterUrl);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const text = await response.text();
        return text;
    } catch (error) {
        showFailToast('网络不良,请重试');
        return null;
    }
}

方法二:设置 Cache-Control 和 Pragma 请求头

也可以通过设置请求头来告诉浏览器不要使用缓存:

javascript 复制代码
// ... existing code ...
export async function fetchRemoteJSAsText(url) {
    try {
        const response = await fetch(url, {
            headers: {
                'Cache-Control': 'no-cache, no-store, must-revalidate',
                Pragma: 'no-cache',
                Expires: '0'
            }
        });
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const text = await response.text();
        return text;
    } catch (error) {
        showFailToast('网络不良,请重试');
        return null;
    }
}

⚠️ 注意:某些 CDN 或服务器可能会忽略这些请求头,因此建议结合 方法一 使用。

方法三:服务器端配置(最佳实践)

如果可以控制目标服务器,可以在响应头中加入以下内容,强制浏览器不缓存该资源:

http 复制代码
Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

总结

  • 如果无法修改服务器配置,推荐使用 方法一(加随机参数)。
  • 如果你有权限控制服务器行为,方法三(服务端禁用缓存) 是最彻底的做法。
  • 方法二(设置请求头) 在大多数情况下也有效,但可能受服务器配置影响。
  • 可以选择其中一种或组合使用以确保每次都获取最新内容。
相关推荐
沐知全栈开发24 分钟前
HTML DOM 访问
开发语言
脑袋大大的1 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
二进制person2 小时前
Java SE--方法的使用
java·开发语言·算法
速易达网络3 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
OneQ6663 小时前
C++讲解---创建日期类
开发语言·c++·算法
耶啵奶膘3 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way3 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
码农不惑3 小时前
2025.06.27-14.44 C语言开发:Onvif(二)
c语言·开发语言
视频砖家3 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
Coding小公仔5 小时前
C++ bitset 模板类
开发语言·c++