Javascript 如何预取和使用JSON资源？

我想预取一个JSON资源，并在必要时在以后的JavaScript代码中使用它

我正在预取：

但我不知道如何访问这个资源。在加载和缓存数据时，我认为

fetch

请求将使用缓存，但它正在向服务器发出第二个请求（我希望避免）

//向服务器发送第二个请求，而不是使用缓存
fetch（'/data.json'）。然后（console.log）；

您希望使用“预加载”而不是“预回迁”，如下所示：

<link rel="preload" href="/data.json" as="fetch"/>

请参阅此线程上的答案：

---

还要查看mdn文档以进行预加载：

我使用Chrome DevTools时启用了禁用缓存（当DevTools打开时）选项，因此

fetch

总是在不查看缓存的情况下向服务器发送新请求。禁用此选项后，将从缓存中正确检索资源

在上图（DevTools网络选项卡）中，第一行显示使用

预回迁对服务器执行的请求：



第二行显示我已经执行了
获取
，但是浏览器没有再次转到服务器，而是从缓存加载了资源

我通过以下方式访问了JSON文件：

//已预取data.json后在单击事件中执行
获取（'/data.json'）
。然后（响应=>{
如果（！response.ok）{
抛出新错误（“HTTP错误”+response.status）；
}
返回response.json（）；
})
。然后（json=>{
console.log（json）；//做点什么
})
.catch（控制台错误）；
抱歉，但我确定我想预取（下载将来可能需要的低优先级的内容）而不是预加载（强制浏览器下载高优先级的内容）。mdn提到预加载的优先级高于预取，但这对我来说很有意义-我不认为优先级比您想要的高-但是，或者，您可以编写一个
fetch（）
调用来随时执行，存储结果，然后在以后使用它-这是您可以手动管理的事情，并选择随时开始加载（可能在页面加载后）谢谢，但手动预取是我过去在另一个项目中做过的事情。我现在更喜欢使用现代的
自动预取。