jQuery Ajax的cache:false是否等价于Fetch的cache:"no-store"配置?
关于
cache: false和Fetchcache: "no-store"的差异 两者效果不完全等价:
- jQuery的
cache: false实现逻辑非常直白:针对GET/HEAD类请求,会自动在URL末尾拼接一个名为_、值为当前时间戳的查询参数,让浏览器把请求识别为全新的资源地址,从根本上绕开HTTP缓存,既不会读取本地已存的缓存响应,也不会把本次响应写入缓存。 - Fetch的
cache: "no-store"走的是浏览器原生HTTP缓存控制规则,效果同样是不读取本地缓存、也不缓存本次响应,最终拿到最新服务端内容的效果和jQuery的cache:false基本一致,但实现路径完全不同:前者靠修改URL绕开缓存,后者靠浏览器内置缓存策略拦截。
如果你的需求只是「每次请求都拿最新的服务端响应,不使用本地缓存」,用cache: "no-store"完全可以满足;如果要100%复刻jQuery的缓存绕过行为,自己给URL拼接时间戳参数即可。
你当前编写的Fetch代码存在的问题
初版代码有几个会直接导致运行报错的问题:
- 原jQuery代码配置了
async: false同步请求,但Fetch API只支持异步模式,没有同步请求的配置项,如果原有业务逻辑依赖同步阻塞的执行顺序,需要调整为异步写法适配。 fetch返回的是Response流对象,不是直接的响应文本,不能直接调用.replace()方法,必须先通过.text()(或.json())方法把响应内容读取出来才能做字符串处理。- Fetch的异常捕获逻辑和jQuery不同:只有网络不通、请求无法发送这类底层错误才会触发
catch,4xx、5xx这类HTTP错误状态默认不会进入catch分支,需要手动判断响应的ok字段做错误处理。 - 原jQuery代码里的
data: "json"属于配置项写错位置:data是发送给服务端的请求参数,指定响应类型应该用dataType,不过看你后续逻辑是手动去掉响应外包裹的注释再解析JSON,这个配置本身就不生效,Fetch里不需要对应处理。
修正后的可运行Fetch版本
async function ajaxLogoutDetailsApi() { const endpoint = 'OIDCGetLogoutDetails'; try { // 要1:1对齐jQuery cache:false逻辑就解开下面2行注释,用requestUrl替代endpoint发请求 // const requestUrl = new URL(endpoint, window.location.origin); // requestUrl.searchParams.set('_', Date.now()); const res = await fetch(endpoint, { method: "GET", cache: "no-store" }); if (!res.ok) throw new Error(`请求异常,状态码:${res.status}`); const rawText = await res.text(); const updated = rawText.replace('\/\*', '').replace('\*\/', ''); const data = JSON.parse(updated); if (data.logoutUrl) { window.location.href = data.logoutUrl; } } catch (err) { console.log("error in ajaxLogoutDetailsApi", err); } }
注意:因为改成了异步函数,调用
ajaxLogoutDetailsApi()的时候如果后续逻辑依赖接口返回结果,需要搭配await使用,避免执行顺序错乱。
内容的提问来源于stack exchange,提问作者Christian
相关产品推荐
相关产品推荐

