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 请求，而是像我们所做的其他所有导入一样工作

Javascript——读取json文件方法总结相关推荐

新手如何使用JavaScript读取json文件 v2.0
前言 3年前,我在纯小白时期写的一篇文章:新手如何使用JavaScript读取json文件至今仍时常有小伙伴点击. 如今自己在此知识领域已经有所成长,故重写一篇更高质量,更有帮助的文章,希望更有效的 ...
html js引用本地资源,了解使用JavaScript读取本地文件的方法
本篇文章给大家介绍一下使用JavaScript读取本地文件的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 出于安全和隐私的原因,web应用程序不能直接访问用户设备上的文件.如 ...
Java 读取 JSON 文件转成 Map 对象
Java 读取 JSON 文件转成 Map 对象应用场景待读取的外部 JSON 文件 Java 代码读取结果 Gson 应用场景 Jar 包或 War 包引用一个外部文件作为项目运行的配置文件 ...
netcore读取json文件_.net core读取json格式的配置文件
在.Net Framework中,配置文件一般采用的是XML格式的,.NET Framework提供了专门的ConfigurationManager来读取配置文件的内容,.net core中推荐使用j ...
javascript读取xml文件读取节点数据的例子
分享下用javascript读取xml文件读取节点数据方法. 读取的节点数据,还有一种情况是读取节点属性数据. <head> <title></title> < ...
java spark 读取json_apache-spark - 与aws-java-sdk链接时，在读取json文件时发生Spark崩溃 - 堆栈内存溢出...
让config.json成为一个小的json文件: { "toto": 1 } 我做了一个简单的代码,用sc.textFile读取json文件(因为文件可以在S3,本地或HDFS上 ...
mysql讀取sql_MySQL数据库之python json及mysql读取json文件存sql等问题
本文主要向大家介绍了MySQL数据库之python json及mysql读取json文件存sql等问题 ,通过具体的内容向大家展现,希望对大家学习MySQL数据库有所帮助. preface: 近期帮师 ...
《机器学习与数据科学（基于R的统计学习方法）》——2.8　读取JSON文件
本节书摘来异步社区<机器学习与数据科学(基于R的统计学习方法)>一书中的第2章,第2.8节,作者:[美]Daniel D. Gutierrez(古铁雷斯),更多章节内容可以访问云栖社区&q ...
cordova js(javascript)读取本地文件（将本地的bin文件转成字节数组）
此问题已经解决,解决方法参考我的博客: cordova本地存储(存取): 读取项目里的本地文件文章目录 1.下面两个比较有用: 2.下面两篇博客证明不用input标签的情况下,无法获取本地文件(包括 ...
Springboot 读取JSON文件
1.使用类加载器读取json文件 @ApiOperation(value = "获取省市区接口", notes = "获取省市区接口")@PostMapping ...

Javascript——读取json文件方法总结

1.使用Fetch API 方法在 JavaScript 中读取json

2.使用 Import 语句在 JavaScript 中读取 JSON 文件

小结

Javascript——读取json文件方法总结相关推荐

最新文章

热门文章