fetch(), bagaimana untuk membuat permintaan bukan cache?

Question

Menggunakan fetch('somefile.json'), bolehkah saya meminta fail daripada pelayan dan bukannya cache penyemak imbas? Dengan kata lain, menggunakan fetch(), adakah mungkin untuk memintas cache penyemak imbas?

P粉731977554 · Answer

Lebih mudah untuk menggunakan mod cache:

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

Rujukan: https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/

P粉395056196 · Answer

Fetch boleh mendapatkan objek init yang mengandungi banyak tetapan tersuai yang mungkin anda mahu gunakan pada permintaan anda, termasuk pilihan yang dipanggil "Pengepala".

Pilihan "headers" mengambil objek Header. Objek ini membolehkan anda mengkonfigurasi pengepala untuk ditambahkan pada permintaan.

Dengan menambah pragma: no-cache dan cache-control: no-cache dalam pengepala, anda memaksa penyemak imbas menyemak pelayan untuk melihat sama ada fail wujud berbeza daripada yang sudah ada dalam cache. Anda juga boleh menggunakan cache-control: no-store kerana ia tidak membenarkan penyemak imbas dan semua cache perantaraan untuk menyimpan sebarang versi respons yang dikembalikan.

Berikut ialah contoh kod:

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