用fetch('somefile.json')，也可以请求该文件是从服务器获取，而不是从浏览器缓存？
换句话说，使用fetch()，是否可以绕过浏览器的缓存？
fetch()，你如何发出一个非缓存的请求？
IT技术
javascript
html
fetch-api
2021-01-24 00:41:32
4个回答
Fetch可以采用包含许多您可能希望应用于请求的自定义设置的 init 对象，这包括一个名为“headers”的选项。
“headers”选项采用Header对象。此对象允许您配置要添加到请求中的标头。
通过将pragma: no-cache和cache-control: no-cache 添加到您的标题中，您将强制浏览器检查服务器以查看该文件是否与缓存中已有的文件不同。您还可以使用cache-control: no-store因为它只是禁止浏览器和所有中间缓存存储返回响应的任何版本。
这是一个示例代码：
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>希望这可以帮助。
更容易使用缓存模式：
// 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/
您可以'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);
});
没有一个解决方案对我来说似乎很有效，但是这个相对干净（AFAICT）的 hack 确实有效（改编自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）。
其它你可能感兴趣的问题