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"脚本标签，如下所示：

// ...

当我们这样做时，仍然会得到另一个错误，为了修复这个错误，我们需要将 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 请求，而是像我们所做的其他所有导入一样工作