如何预取外部JSON文件并在JS中使用？

算力阿峰

2026-6-24

如何将预取的JSON文件传递到JS中使用

当你用<link rel="prefetch">预取JSON文件后，浏览器会自动把资源缓存起来，后续JS里请求同一个URL时会直接读取缓存，不需要额外的“传递”操作，只要保证请求路径一致即可，具体操作如下：

1. 配置HTML预取标签

在HTML头部添加预取标签，指定as="fetch"告诉浏览器这是用于fetch请求的资源，确保缓存能被正确匹配：

<link rel="prefetch" href="https://json.file" as="fetch">

2. 在JS中复用缓存资源

直接用fetch请求同一个URL，浏览器会自动命中预取的缓存，拿到数据后即可使用：

fetch("https://json.file")
  .then((res) => res.json())
  .then((data) => {
    // 在这里处理并使用JSON数据
    console.log('预取的JSON数据:', data);
    // 比如渲染页面内容、初始化业务逻辑等
  })
  .catch(err => {
    // 处理缓存失效或请求失败的情况
    console.error('获取数据出错:', err);
  });

额外注意事项

URL必须完全一致：fetch的URL要和预取标签里的href完全匹配（包括协议、域名、路径、查询参数），否则浏览器会重新发起请求，无法命中预取缓存。
优先级调整：如果需要更高优先级的预加载（比如页面必须用到的核心数据），可以替换成rel="preload"，并在加载完成后转为预取缓存避免重复加载：
```
<link rel="preload" href="https://json.file" as="fetch" onload="this.onload=null; this.rel='prefetch'">
```
全局注入方式（可选）：如果想让数据提前在全局可用，也可以直接在HTML中用内联脚本提前请求并挂载到全局对象，后续JS文件直接读取：
```
<script>
  window.prefetchedJSON = null;
  fetch("https://json.file")
    .then(res => res.json())
    .then(data => window.prefetchedJSON = data);
</script>
```
之后在其他JS文件中直接使用window.prefetchedJSON即可。