---
title: Request.cache
slug: Web/API/Request/cache
translation_of: Web/API/Request/cache
---
<div>{{APIRef("Fetch")}}</div>

<p><strong><code>cache</code></strong> 作为{{domxref("Request")}} 接口只读属性包含着请求的缓存模式。它控制着请求以何种方式与浏览器的  <a href="/en-US/docs/Web/HTTP/Caching">HTTP </a>缓存进行交互。</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: js">var currentCacheMode = request.cache;</pre>

<h3 id="Value">Value</h3>

<p>A <code>RequestCache</code> value. The available values are:</p>

<ul>
 <li><code>default</code> — 浏览器从HTTP缓存中寻找匹配的请求。

  <ul>
   <li>如果缓存匹配上并且有效（ <a href="/en-US/docs/Web/HTTP/Caching#Freshness">fresh</a>）, 它将直接从缓存中返回资源。</li>
   <li>如果缓存匹配上但已经过期 ，浏览器将会使用传统（ <a href="/en-US/docs/Web/HTTP/Conditional_requests">conditional request</a> ）的请求方式去访问远程服务器 。如果服务器端显示资源没有改动，它将从缓存中返回资源。否则，如果服务器显示资源变动，那么重新从服务器下载资源更新缓存。</li>
   <li>如果缓存没有匹配，浏览器将会以普通方式请求，并且更新已经下载的资源缓存。</li>
  </ul>
 </li>
 <li><code>no-store</code> — 浏览器直接从远程服务器获取资源，不查看缓存，并且不会使用下载的资源更新缓存。</li>
 <li><code>reload</code> — 浏览器直接从远程服务器获取资源，不查看缓存，然后使用下载的资源更新缓存。</li>
 <li><code>no-cache</code> — 浏览器在其HTTP缓存中寻找匹配的请求。
  <ul>
   <li>如果有匹配，无论是新的还是陈旧的，浏览器都会向远程服务器发出条件请求。如果服务器指示资源没有更改，则将从缓存中返回该资源。否则，将从服务器下载资源并更新缓存。</li>
   <li>如果没有匹配，浏览器将发出正常请求，并使用下载的资源更新缓存。</li>
  </ul>
  <code>force-cache </code>— 浏览器在其HTTP缓存中寻找匹配的请求。

  <ul>
   <li>如果有匹配项，不管是新匹配项还是旧匹配项，都将从缓存中返回。</li>
   <li>如果没有匹配，浏览器将发出正常请求，并使用下载的资源更新缓存。</li>
  </ul>
 </li>
 <li><code>only-if-cached</code> — 浏览器在其HTTP缓存中寻找匹配的请求。
  <ul>
   <li>如果有匹配项(新的或旧的)，则从缓存中返回。</li>
   <li>如果没有匹配，浏览器将返回一个错误。</li>
  </ul>
  The <code>"only-if-cached"</code> mode can only be used if the request's <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Request/mode">mode</a></code> is <code>"same-origin"</code>. Cached redirects will be followed if the request's <code>redirect</code> property is <code>"follow"</code> and the redirects do not violate the <code>"same-origin"</code> mode.</li>
</ul>

<h2 id="Example">Example</h2>

<pre class="brush: js">// 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 */ });</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Fetch','#dom-request-cache','cache')}}</td>
   <td>{{Spec2('Fetch')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("api.Request.cache")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
 <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
 <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
</ul>