cache 只读属性

Request中包含较多的属性，其中，我们已经介绍过了body属性与bodyUsed属性，在本小章节内容中，你将会认识到更多的Request属性！

Request接口的cache只读属性包含请求的缓存模式。它控制请求将如何与浏览器的HTTP缓存进行交互。

cache 属性语法

var currentCacheMode = request.cache;

cache 属性值

一个RequestCache值。可用的值是：

• default：浏览器在HTTP缓存中查找匹配的请求。
  • 如果有匹配项并且它是新的，则将从缓存中返回。
  • 如果有匹配项，但是已经过期，则浏览器将向远程服务器发出有条件的请求。如果服务器指示资源没有改变，它将从缓存中返回。否则，资源将从服务器下载，并且缓存将被更新。
  • 如果不匹配，浏览器将发出正常的请求，并用下载的资源更新缓存。
• no-store：浏览器从远程服务器获取资源，而不先查看缓存，并且不会使用下载的资源更新缓存。
• reload：浏览器从远程服务器获取资源，而不先查看缓存，然后用下载的资源更新缓存。
• no-cache ：浏览器在HTTP缓存中查找匹配的请求。
  • 如果有新的或旧的匹配，浏览器将向远程服务器发出有条件的请求。如果服务器指示资源没有改变，它将从缓存中返回。否则，资源将从服务器下载，缓存将被更新。
  • 如果不匹配，浏览器将发出正常的请求，并用下载的资源更新缓存。
• force-cache：浏览器在HTTP缓存中查找匹配的请求。
  • 如果有新的或旧的匹配，它将从缓存中返回。
  • 如果不匹配，浏览器将发出正常的请求，并用下载的资源更新缓存。
• only-if-cached：浏览器在HTTP缓存中查找匹配的请求。
  • 如果有新的或旧的匹配，如果将从缓存返回。
  • 如果不匹配，浏览器将返回一个错误。
  该"only-if-cached"模式只能用于请求的mode为"same-origin"的情况。如果请求的redirect属性是"follow"，并且重定向不违反"same-origin"模式，则会遵循缓存重定向。

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

规范

浏览器兼容性

• 电脑端

• 移动端