如何在JavaScript中读取JSON文件-在JS中阅读JSON在某些情况下，当在本地工作时，或者将数据文件上传到服务

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

在某些情况下，当在本地工作时，或者将数据文件上传到服务器时，我们可能希望从文件中读取这些JSON数据。

如何使用Fetch API在JavaScript中读取JSON文件

我们可以用来读取JSON文件（本地文件或上传到服务器的文件）的一个标准方法是使用Fetch API。它对两者都使用相同的语法。唯一的区别是URL。

例如，假设我们在项目文件夹中有一个名为data.json的本地文件，其中包含以下JSON数据：

<!--./data.JSON-->

{
    "id": 1,
    "title": "Hello World",
    "completed": false
}

我们现在可以使用Fetch API方法在JavaScript中读取此文件：

<!--./index.js-->

fetch('./data.json')
    .then((response) => response.json())
    .then((json) => console.log(json));

在上面，我们能够读取本地JSON文件。但不幸的是，当我们在浏览器中运行此操作时，我们可能会收到以下CORS错误，因为我们的文件不在服务器上`。

为了解决这个问题，我们将确保我们的JSON文件位于本地或远程服务器上。如果我们在IDE上使用Live服务器，我们不会收到此错误。但是，当我们直接加载文件时，我们会收到这个错误。

正如我之前所说，假设我们在远程服务器上有这个JSON文件，并试图用JavaScript读取这个文件。相同的语法将起作用：

<!--./index.js-->

fetch('https://server.com/data.json')
    .then((response) => response.json())
    .then((json) => console.log(json));

当我们想将外部服务器或本地文件的JSON文件读取到我们的JavaScript文件中时，fetch API是首选方法。

除了提出HTTP请求外，我们可以使用的另一个方法是导入语句。这种方法有一些并发症，但我们会解决所有问题。

就像上一节一样，假设我们有包含用户数据的JSON文件，例如user.json：

<!--./user.JSON-->

{
    "id": 1,
    "name": "John Doe",
    "age": 12
}

我们可以使用导入语句在JavaScript中读取此JSON数据：

<!---./index.js-->

import data from './data.json';
console.log(data);

不幸的是，这将引发一个错误，说我们无法在模块之外使用导入语句。当我们尝试在常规JavaScript文件中使用import语句时，这是一个标准错误，特别是对于JavaScript新手开发人员。

为了解决这个问题，我们可以在HTML文件中添加type="module"脚本标签，其中我们引用了JavaScript文件，如下所示：

<html lang="en">
    // ...
    <body>
        <script type="module" src="./index.js"></script>
    </body>
</html>

当我们这样做时，我们仍然会收到另一个错误。

要修复此错误，我们需要将JSON的文件类型添加到导入语句中，然后我们才能用JavaScript读取我们的JSON文件：

import data from './data.json' assert { type: 'JSON' };
console.log(data);

只要我们在本地或远程服务器上运行文件，这就可以完美工作。但假设我们在本地运行这个，那么我们会收到CORS错误。

在本文中，我们学习了如何在JavaScript中读取JSON文件，以及我们在使用每种方法时可能遇到的错误。