fetch(),如何进行非缓存请求
fetch(), how do you make a non-cached request?
使用fetch('somefile.json')
,是否可以请求从服务器而不是从浏览器缓存中提取文件?
换句话说,有了fetch()
,是否可以绕过浏览器的缓存?
更容易使用缓存模式:
// Download a resource with cache busting, to bypass the cache
// completely.
fetch("some.json", {cache: "no-store"})
.then(function(response) { /* consume the response */ });
// Download a resource with cache busting, but update the HTTP
// cache with the downloaded resource.
fetch("some.json", {cache: "reload"})
.then(function(response) { /* consume the response */ });
// Download a resource with cache busting when dealing with a
// properly configured server that will send the correct ETag
// and Date headers and properly handle If-Modified-Since and
// If-None-Match request headers, therefore we can rely on the
// validation to guarantee a fresh response.
fetch("some.json", {cache: "no-cache"})
.then(function(response) { /* consume the response */ });
// Download a resource with economics in mind! Prefer a cached
// albeit stale response to conserve as much bandwidth as possible.
fetch("some.json", {cache: "force-cache"})
.then(function(response) { /* consume the response */ });
参考:https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/
Fetch可以获取一个init对象,该对象包含许多您可能想要应用于请求的自定义设置,其中包括一个名为"标题";。
";标题";选项采用Header对象。此对象允许您配置要添加到请求中的标头。
通过在标头中添加pragma:no-cache和缓存控制:no-cache,您将强制浏览器检查服务器,查看文件是否与缓存中已有的文件不同。您也可以使用缓存控制:无存储,因为它只是不允许浏览器和所有中间缓存存储返回响应的任何版本。
这是一个示例代码:
var myImage = document.querySelector('img');
var myHeaders = new Headers();
myHeaders.append('pragma', 'no-cache');
myHeaders.append('cache-control', 'no-cache');
var myInit = {
method: 'GET',
headers: myHeaders,
};
var myRequest = new Request('myImage.jpg');
fetch(myRequest, myInit)
.then(function(response) {
return response.blob();
})
.then(function(response) {
var objectURL = URL.createObjectURL(response);
myImage.src = objectURL;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6</title>
</head>
<body>
<img src="">
</body>
</html>
似乎没有一个解决方案对我有效,但这个相对干净的(AFAICT)破解确实有效(改编自https://webmasters.stackexchange.com/questions/93594/prevent-browser-from-caching-text-file):
const URL = "http://example.com";
const ms = Date.now();
const data = await fetch(URL+"?dummy="+ms)
.catch(er => game_log(er.message))
.then(response => response.text());
这只是添加一个伪参数,该参数在每次调用查询时都会发生变化。无论如何,如果其他解决方案似乎有效,我建议使用这些解决方案,但在我的测试中,它们在我的情况下不起作用(例如,使用Cache-Control
和pragram
的解决方案)。
您可以在标题中设置'Cache-Control': 'no-cache'
,如下所示::
return fetch(url, {
headers: {
'Cache-Control': 'no-cache'
}
}).then(function (res) {
return res.json();
}).catch(function(error) {
console.warn('Failed: ', error);
});
相关文章:
- 如何缓存AJAX请求的图像
- 是否可以缓存可下载的文件,并在XHR和非XHR请求之间共享该缓存
- 在动态功能中缓存ajax请求
- fetch(),如何进行非缓存请求
- HTML5 本地存储作为缓存和单个资产请求
- Flux+Rreact.js-缓存API请求响应
- 如何在从缓存加载路由后强制服务工作者从网络请求路由
- 向ajax json请求添加缓存
- 阻止浏览器缓存AJAX请求
- 在Angularjs服务中为返回对象引用的http请求提供的数据构建简单的缓存
- 当有多个 React.js 组件实例具有数据请求时如何处理缓存
- 浏览器缓存是否知道javascript xmlhttp请求
- 服务工作线程是否可以缓存 POST 请求
- 如何强制 jQuery 向服务器发出 GET 请求以刷新缓存的资源
- jQuery Ajax GET请求不会缓存
- Javascript:检测是否缓存了请求的文件,如果存在较新版本,则删除缓存
- 是否'cache:false'PREVENT缓存,或UNIQUE-IFY请求绕过缓存
- Express.js缓存请求结果与动态数据
- DNS缓存请求模块- node.js
- 在node.js中缓存请求