javascript fetch()，你怎么做一个非缓存的请求？

epggiuax 于 2022-12-25 发布在 Java

关注(0)|答案(4)|浏览(361)

使用fetch('somefile.json')，可以请求从服务器而不是从浏览器缓存中获取文件。
换句话说，使用fetch()，是否可以绕过浏览器的缓存？

JavaScript

来源：https://stackoverflow.com/questions/29246444/fetch-how-do-you-make-a-non-cached-request

4条答案

按热度按时间

dsekswqp1#

更易于使用缓存模式：

// 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/

赞(0）回复(0）举报 2022-12-25

eivnm1vs2#

Fetch可以接受一个init对象，其中包含许多您可能希望应用于请求的自定义设置，这包括一个名为"header"的选项。
"headers"选项接受一个Header对象，这个对象允许你配置你想要添加到请求中的头。
通过添加杂注：无缓存和缓存控制：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>

赞(0）回复(0）举报 2022-12-25

oyxsuwqo3#

您可以在标题中设置'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);
});

赞(0）回复(0）举报 2022-12-25

qcuzuvrc4#

所有的解决方案似乎都不适合我，但这个相对干净的（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的解决方案）。

赞(0）回复(0）举报 2022-12-25

我来回答

javascript fetch()，你怎么做一个非缓存的请求？

4条答案

相关问题

热门标签

最新问答