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影片教學