使用 index.html 访问 JSON 文件答案

【问题标题】：Accessing JSON file with index.html使用 index.html 访问 JSON 文件
【发布时间】：2022-01-10 16:13:01
【问题描述】：

我的index.html 和data.json 文件都在同一个目录中
那么如何从 index.html 访问 json 文件呢？

在 index.html 中可能是这样的：

<script>
  const data= require('./data.json') //obviously this won't work
</script>

根据this question 的所有答案，您必须先发送 index.html 文件，然后向服务器发出 fetch 请求以向您发送 json 文件

但是有没有办法将它们一起发送以避免延迟？

【问题讨论】：

【解决方案1】：

您可以将 JSON 嵌入到 HTML 文档中，方法是对其进行硬编码或使用服务器端编程来生成 HTML。

【讨论】：

【解决方案2】：

您可以获取文件所在的服务器。

<script>
  (async () => {
    raw = await fetch('/data.json')
    data = await raw.json()
  })().catch(console.warn)
</script>

【讨论】：

我特别想避免这种情况，因为它有等待提取的延迟
必须从提供文件的地方请求文件。没有办法解决这个问题。
@cakelover，要么首先将文件内容放在一起，要么将文件与服务器端渲染放在一起，要么单独请求文件。 HTTP/2 和 http/3 预加载/“服务器推送”开始解决这个问题，但仍处于草案阶段：smashingmagazine.com/2017/04/guide-http2-server-push
来自问题：“您必须先发送 index.html 文件，然后向服务器发出 fetch 请求以向您发送 json 文件，但是没有办法将它们一起发送到避免延误？” - 这显然是 OP 试图避免的。
@Quentin，我必须承认我没有正确阅读这个问题。但是，这就是 html 的工作方式。该文件仅由用户的浏览器解析和解释，因此它是唯一可以进行诸如导入之类的操作的地方。网络的工作方式，这意味着发出请求。您几乎无法从用户的硬盘中请求它。或者，有人建议嵌入文件内容，这也是 OP 不想要的。 OP 想要不可能的事。