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

总结

  • 如果无法修改服务器配置,推荐使用 方法一(加随机参数)。
  • 如果你有权限控制服务器行为,方法三(服务端禁用缓存) 是最彻底的做法。
  • 方法二(设置请求头) 在大多数情况下也有效,但可能受服务器配置影响。
  • 可以选择其中一种或组合使用以确保每次都获取最新内容。
相关推荐
wjs20242 小时前
状态模式(State Pattern)
开发语言
我命由我123452 小时前
Kotlin 数据容器 - List(List 概述、创建 List、List 核心特性、List 元素访问、List 遍历)
java·开发语言·jvm·windows·java-ee·kotlin·list
liulilittle2 小时前
C++ TAP(基于任务的异步编程模式)
服务器·开发语言·网络·c++·分布式·任务·tap
励志要当大牛的小白菜3 小时前
ART配对软件使用
开发语言·c++·qt·算法
灵感__idea4 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
爱装代码的小瓶子5 小时前
数据结构之队列(C语言)
c语言·开发语言·数据结构
Maybe_ch7 小时前
.NET-键控服务依赖注入
开发语言·c#·.net
超浪的晨7 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
终焉暴龙王7 小时前
CTFHub web进阶 php Bypass disable_function通关攻略
开发语言·安全·web安全·php
hui函数7 小时前
掌握JavaScript函数封装与作用域
前端·javascript