为什么从Vue.js的挂载钩子发送的AJAX GET请求总是忽略浏览器缓存？

Question

我在Vue组件中为我的AJAX请求使用Axios，并注意到（在页面刷新后）对缓存endpoint的请求被发送到服务器，而不是在从挂载钩子调用时命中缓存。每个其他请求都正确地命中浏览器缓存。

当我将第二个请求移动到中时，我有两个（不同的）请求被从挂载的钩子中分派。然后（），它开始命中浏览器缓存。

是什么导致了这种行为？如何从挂载挂钩内的缓存加载页面数据？

编辑：在Firefox中可以看到这种行为。在新选项卡中粘贴请求URL将正确加载浏览器缓存中的数据。我还没有找到一个解决方案来强制请求遵守挂载钩子中Vue代码中的缓存控制。

Answer 1

TL，DR；
要正确测试页面的客户端缓存，请将URL复制/粘贴到新选项卡中，而不是点击F5。

为什么？

作为开发人员，当用户点击刷新时会发生什么并不完全取决于您。这也取决于浏览器制造商。

如果您正在寻找一种方法，禁止浏览器在其版本（根据缓存控制服务器端设置）仍然有效的情况下加载新数据，则没有这种方法。

这取决于浏览器制造商猜测用户真正想要什么并提供它。平均而言，如果猜测正确，他们的市场份额就会上升。当错误发生时，它会下降。显然，你没有发言权。

你也应该考虑到绝大多数的网站拥有者不知道如何调整缓存控制，也不需要花钱为他们做一些事情，所以他们只是默认了。因此，为了让用户满意，浏览器制造商需要正确猜测用户何时需要更新内容，即使服务器说内容足够新鲜。

换句话说，您不能强制执行客户端缓存（但可以强制执行服务器端缓存！）。你只能提出建议。如果浏览器制造商有理由相信用户需要“清除缓存和硬重新加载”，但技术水平不足以执行，他们会在简单刷新时执行。

Chrome基于大量的使用数据，试图猜测页面的“主缓存”是什么，“辅助缓存”是什么。它试图在提供新内容（通过清除该页面的主缓存）和及时提供新内容（通过不清除辅助缓存）之间取得平衡。我相信在同一个域上由一个以上页面加载的任何资源都被标记为“次要”，尽管我猜算法比这更聪明。

据我所知，Firefox没有多种刷新类型，因此，如果用户点击“刷新”，则所述页面的所有缓存都将消失。