调用 fetch 时如何设置缓存条目的最大期限？

Question

我可能从根本上误解了这里的一些东西，但在我看来，如果我想取东西我可以打电话

let r = await fetch("someurl");

浏览器将使用缓存版本（如果有）。或者我可以打电话

let r = await fetch("someurl", {
  cache: "reload"
});

我总是会得到新版本。

我找不到的是如何告诉它我只想要缓存版本（如果它早于 X 分钟）。

我可以做

let r = await fetch("someurl", {
  headers: {
    "Cache-control": "max-age=180"
  }
});

但是afaiu，它只会被发送到服务器，并不会真正影响浏览器对其自己的缓存中的值所做的事情。

Answer 1

您的思路是正确的，但您的理解略有偏差。当您在获取 API 中使用缓存选项时，您可以控制浏览器如何从其缓存或网络获取资源。 “重新加载”选项确实会强制浏览器绕过其缓存并从网络获取新版本。

Answer 2

理论上你实际上可以完全按照你所说的去做：

let r = await fetch("someurl", {
  headers: {
    "Cache-Control": "max-age=180"
  }
});

那是因为

Cache-Control

是一个 请求头 也是一个响应头：

max-age

请求指令表示客户端更喜欢年龄小于或等于指定秒数的响应。

我过去的印象是浏览器缓存不尊重这个请求标头，所以我不确定这在实践中效果如何。