Javascript fetch(),如何发出非缓存请求?

Javascript fetch(),如何发出非缓存请求?,javascript,html,fetch-api,Javascript,Html,Fetch Api,使用fetch('somefile.json'),可以请求从服务器而不是浏览器缓存中获取文件 换句话说,使用fetch(),是否可以绕过浏览器的缓存?可以获取包含许多自定义设置的init对象,这些设置可能要应用于请求,其中包括一个名为“headers”的选项 “headers”选项接受一个对象。此对象允许您配置要添加到请求中的标题 通过在标题中添加pragma:no cache和缓存控件:no cache,您将强制浏览器检查服务器,查看文件是否与缓存中已有的文件不同。您还可以使用缓存控制:no

使用
fetch('somefile.json')
,可以请求从服务器而不是浏览器缓存中获取文件

换句话说,使用
fetch()
,是否可以绕过浏览器的缓存?

可以获取包含许多自定义设置的init对象,这些设置可能要应用于请求,其中包括一个名为“headers”的选项

“headers”选项接受一个对象。此对象允许您配置要添加到请求中的标题

通过在标题中添加pragma:no cache缓存控件:no cache,您将强制浏览器检查服务器,查看文件是否与缓存中已有的文件不同。您还可以使用缓存控制:no store,因为它只允许浏览器和所有中间缓存存储返回响应的任何版本

下面是一个示例代码:

var myImage=document.querySelector('img');
var myHeaders=newheaders();
append('pragma','no cache');
append('cache-control','no-cache');
var myInit={
方法:“GET”,
标题:myHeaders,
};
var myRequest=newrequest('myImage.jpg');
获取(myRequest,myInit)
.然后(功能(响应){
返回response.blob();
})
.然后(功能(响应){
var objectURL=URL.createObjectURL(响应);
myImage.src=objectURL;
});

ES6

更方便地使用缓存模式:

  // 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 */ });

参考:

您可以在标题中设置
'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)的黑客方法确实奏效(改编自:


这只是添加一个在每次调用查询时都会更改的伪参数。无论如何,如果其他解决方案似乎有效,我建议使用这些解决方案,但在我的测试中,它们在我的情况下不起作用(例如,使用
缓存控制
pragram
)。

您是否有在中获取的参考?我看不出来。或者您是指?RobG-使用
新请求
并将一些参数传递给
缓存
选项怎么样?我试图使用它,但它不起作用。标题的大小写是否重要?例如,“缓存控制”与“缓存控制”。@IsaacLyman,虽然HTTP头不区分大小写,但我建议您遵循建议的文档,即:“缓存控制”。参考:这是一个更合适的答案。您可以通过这些选项处理诸如“If Modified Since”和“If None Match”之类的标题。这似乎适用于Firefox(54),但不适用于Chrome(60)。burningfuses的答案确实有效。我已经测试过了,到今天(2019年11月),这种方法似乎可以在Windows、Linux和Android上的Opera、Chrome和FireFox上使用。burningfuses方法至少在Opera上失败。在我的例子中,它没有强制缓存重新加载,直到我另外指定了
pragma:no cache
这与获胜答案不同。谢谢!这是唯一对我有用的东西。
  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());