fetch()，如何发出非缓存请求？

Question

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

P粉731977554 · Answer

更轻松地使用缓存模式：

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

P粉395056196 · Answer

Fetch 可以获取包含许多内容的 init 对象您可能想要应用于请求的自定义设置，其中包括一个名为“标头”的选项。

“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;
  });

ES6

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程