javascript读取文件内容（Javascript——读取json文件方法总结）
目录
1.使用Fetch API 方法在 JavaScript 中读取json
2.使用 Import 语句在 JavaScript 中读取 JSON 文件
小结
1.使用Fetch API 方法在 JavaScript 中读取json
当我们想要从外部服务器或本地文件读取 JSON 文件到 JavaScript 文件时 ，使用 Fetch API 是更可取的方法
fetch(./data.json) .then((response) => response.json()) .then((json) => console.log(json));在上面 ，我们已经能够读取本地 JSON 文件 。但不幸的是 ，当我们在浏览器中运行它时 ，可能会收到以下 CORS 错误 ，因为我们的文件不在服务器上 。
为了解决这个问题 ，我们将确保 JSON 文件位于本地或远程服务器上 。如果我们在 IDE 上使用 Live 服务器 ，则不会出现此错误 。但是当我们直接加载文件时 ，会得到这个错误 。
正如我之前所说 ，假设我们在远程服务器上有这个 JSON 文件 ，并试图用 JavaScript 读取这个文件 ，相同的语法将起作用：
fetch(https://server.com/data.json) .then((response) => response.json()) .then((json) => console.log(json));2.使用 Import 语句在 JavaScript 中读取 JSON 文件
除了发出 HTTP 请求之外 ，我们还可以使用的另一种方法是 import 语句 。这种方法有一些复杂性 ，但我们将解决所有问题：
假设我们有保存用户数据的 JSON 文件 ，可以通过这种方式使用 import 语句在 JavaScript 中读取这个 JSON 数据：
import data from ./data.json; console.log(data);不幸的是 ，这会抛出一个错误 ，说我们不能在模块之外使用 import 语句 。当我们尝试在常规 JavaScript 文件中使用 import 语句时 ，这是一个标准错误 ，尤其是对于不熟悉 JavaScript 的开发人员 。
为了解决这个问题 ，我们可以在引用 JavaScript 文件的 HTML 文件中添加 type="module" 脚本标签 ，如下所示：
<html lang="en"> // ... <body> <script type="module" src="./index.js"></script> </body> </html>当我们这样做时 ，仍然会得到另一个错误 ，为了修复这个错误 ，我们需要将 JSON 文件类型添加到 import 语句中 ，然后我们就可以在 JavaScript 中读取 JSON 文件：
import data from ./data.json assert { type: JSON }; console.log(data);只要我们在本地或远程服务器上运行文件 ，它就可以完美地工作 。但是假设我们在本地运行它 ，就会得到 CORS 错误 。
小结
在本文中 ，我们学习了如何在 JavaScript 中读取 JSON 文件 ，以及在使用每种方法时可能遇到的错误 。
当你要发出 HTTP 请求时 ，最好使用 Fetch API 方法 。例如 ，假设我们从一个模拟 JSON 文件中获取数据 ，我们最终将从 API 中提取该文件 。
不过 ，在我们不需要使用 HTTP 请求的情况下 ，可以使用 import 语句 。当我们使用像 React 、Vue 等与模块有关的库时 ，可以使用 import 语句 。这意味着我们不需要添加模块的类型 ，也不需要添加文件的类型 。
这两种方法都不需要你安装包或使用内置的库 。选择使用哪种方法完全取决于你 。
但是区分这些方法的一个快速提示是 ，Fetch API 通过发送 HTTP 请求来读取 JavaScript 中的 JSON 文件 ，而 import 语句不需要任何 HTTP 请求 ，而是像我们所做的其他所有导入一样工作
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！