我有一个React应用程序，其中我正在对后端API进行fetch请求。
我正在尝试在UI端实现缓存以处理大量请求，在Mozilla Firefox中成功实现了它并且运行良好。但是Chrome经常会让我很困扰。这里是我正在尝试实现的代码 -
fetch(URL, {
signal: this.abortController.signal,
cache: "default",
headers: {
"Cache-Control": "max-age=120"
}
})
.then(response => return response.json())
.catch(error => {
if (error.name === "AbortError") {
return;
}
this.setError(error);
});
我遵循以下步骤来检查缓存-
- 首先打开执行fetch请求的选项卡。
- 将选项卡更改为另一个选项卡。
- 在超时期限（120秒）内返回到第1步中提到的选项卡。
在Firefox的网络选项卡中检查时，我可以看到“传输”显示为“缓存”，页面加载明显改善，一切都按预期工作。
然而，在Chrome中，我仍然可以看到“大小”为“3.9 KB”，时间为一些“ms”。
我尝试了- Is Chrome ignoring Cache-Control: max-age?中提到的步骤，但没有成功。
我还发现- https://www.mnot.net/blog/2017/03/16/browser-caching上说：
Chrome仅支持max-age = 0的请求，并且只支持值为0。它不支持min-fresh或max-stale。
但这篇文章比较旧（2017年），我不确定它是否仍然正确。
此外，查看Fetch规范 - https://fetch.spec.whatwg.org/#concept-request-cache-mode，'default'是我需要的缓存模式，但我不确定为什么它在Chrome上无法工作。
有没有人能够指导我？怎样才能使其在Firefox和Chrome中都正常工作？
编辑 - 好吧，在Google Chrome和Firefox中将“cache”用作“force-cache”可以工作。
来自- https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/
“default”表示使用浏览器下载资源的默认行为。 Firefox和Chrome的默认行为是否不同？由于这是浏览器的默认行为，所以取决于浏览器如何使用它。
此外，
“force-cache”表示如果在缓存中发现匹配的条目，则浏览器将始终使用缓存的响应，而忽略响应的有效性。因此，即使在缓存中找到了非常旧版本的响应，也将始终在不进行验证的情况下使用它。
我不确定“force-cache”在Chrome中的工作原理，但这不是我需要的。