通过 fetch 强制使用 HTTP 缓存

Question

我尝试使用 HTTP 缓存来做一些简单的事情，但我无法让它工作。

我正在使用以下选项

fetch()

。

fetch('test', {
        cache: 'force-cache',
        headers: {
            'Cache-Control': 'max-age=3600',
            'Pragma': 'max-age=3600', // added for redundancy
        }
    })
    .then( response => response.json() )
    .then( data     => console.log(data) )
    .catch( error   => console.error(error) )
    .finally( ()    => console.log('Done') );

test

端点仅返回具有以下格式的json

{
    "date": "...", /* date in 'Y-m-d H:i:s' format */
}

我已确保响应也具有 Cache-Control 标头。当我检查响应标头时我可以看到它。

HTTP/1.1 200 好
服务器：阿帕奇
缓存控制：公共，最大年龄=3600
内容长度：30
保持活动：超时=5，最大值=94
连接：保持活动状态
内容类型：application/json；字符集=UTF-8

请求标头似乎也是正确的。

连接：保持活动状态
编译指示：最大年龄=3600
缓存控制：max-age=3600
接受： */*
Sec-Fetch-Site：同源
秒获取模式：cors
Sec-Fetch-Dest：空

我尝试在一分钟内一遍又一遍地运行相同的获取，期望获得相同的日期，不变，但可以说结果总是“新的”。

我对 HTTP 缓存的工作原理有根本性的误解吗？还是我最好只在后端缓存该值？

---

我目前正在通过在

<script>

标签内运行以下代码进行测试。

let x = 0;
const interval_id = setInterval(() => {
  fetch('test', { ... });
  if (++x === 20) {
    window.clearInterval(interval_id);
  }
}, 1500);

我期望返回相同的日期时间 20 次（缓存第一个响应）

Answer 1

或者，如果您不想依赖 max-age 并希望立即从缓存中渲染，请考虑探索我的 CacheFirst 库的功能，网址为 https://github.com/lakshminathan/CacheFirst。该库利用 localStorage 和 indexedDB 进行存储，并使用 SHA-256 来比较新旧响应，允许您立即提供缓存的响应，并且仅在新响应不同时才重新渲染。与 max-age 方法相比，这种方法减少了我们提供过时数据的时间。