如何用JavaScript读取JSON文件 - 在JS中读取JSON

迪鲁宾
10,110 阅读4分钟

当从外部来源或服务器获取数据时，你需要确保返回的数据是JSON格式的。然后你就可以在你的应用程序中消费这些数据。

在某些情况下，当你在本地工作或将数据文件上传到服务器时，我们可能想从文件中读取这些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。

如何用导入语句在JavaScript中读取一个JSON文件

除了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文件中引用JavaScript文件的地方添加type="module" 脚本标签，像这样：

<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文件，以及使用每种方法时可能遇到的错误。

当你想进行HTTP请求时，最好使用fetch API方法。例如，假设我们正在从一个模拟的JSON文件中获取数据，我们最终会从一个API中提取。

不过，在我们不需要使用HTTP请求的情况下，我们还是可以使用import语句。当我们使用像React、Vue等与模块有关的库时，我们可以使用导入语句。这意味着我们不需要添加模块的类型，同时，我们也不需要添加文件的类型。

这两种方法都不需要你安装一个包或使用一个库，因为它们是内置的。选择使用哪种方法，完全取决于你。

但区别这些方法的一个快速提示是，Fetch API通过发送HTTP请求在JavaScript中读取一个JSON文件，而import语句不需要任何HTTP请求，而是像我们做的每一个其他导入一样工作。

avatar
文章
阅读
粉丝