脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js读取json文件方法

Javascript读取json文件方法实例总结

 更新时间：2022年11月11日 15:00:53   作者：helloyangkl  
json文件是一种轻量级的数据交互格式,下面这篇文章主要给大家介绍了关于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 请求，而是像我们所做的其他所有导入一样工作

补充：js Fetch API

Fetch API提供了一个 JavaScript 接口，用于访问和操纵HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用XMLHttpRequest 实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如 Service Workers。Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如 CORS 和 HTTP 的扩展。

请注意，fetch 规范与 jQuery.ajax() 主要有三种方式的不同：

  • 当接收到一个代表错误的 HTTP 状态码时，从fetch()返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
  • fetch() 不会接受跨域 cookies；你也不能使用 fetch() 建立起跨域会话。其他网站的 Set-Cookie 头部字段将会被无视。
  • fetch 不会发送 cookies。除非你使用了credentials 的初始化选项。（自 2017 年 8 月 25 日以后，默认的 credentials 政策变更为 same-origin。Firefox 也在 61.0b13 版本中进行了修改）

一个基本的 fetch 请求设置起来很简单。看看下面的代码：

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();   //由于返回值不是真的json，而是json形式的文本，需要调用json()进行转换
  })
  .then(function(myJson) {
    console.log(myJson);
  });

这里我们通过网络获取一个 JSON 文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想 fetch() 到的资源路径，然后返回一个包含响应结果的promise（一个 Response 对象）。

当然它只是一个HTTP 响应，而不是真的JSON。为了获取JSON的内容，我们需要使用 json()方法（ json()方法在 Body mixin 接口中定义， Request 和 Response 对象实现该接口，因此也实现了该方法）。确切来说，此时只是获取了一个Json形式的文本，通过Body.json()，读取 Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 JSON 格式的 Promise 对象。

注意：Body mixin 还有其他相似的方法，用于获取其他类型的内容。参考 Body

最好使用符合内容安全策略 (CSP)的链接而不是使用直接指向资源地址的方式来进行Fetch的请求。

总结

到此这篇关于Javascript读取json文件方法的文章就介绍到这了,更多相关js读取json文件方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS获取网页图片name属性的方法

    JS获取网页图片name属性的方法

    这篇文章主要介绍了JS获取网页图片name属性的方法,涉及javascript操作图片属性的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • JS刷新父窗口的几种方式小结(推荐)

    JS刷新父窗口的几种方式小结(推荐)

    下面小编就为大家带来一篇JS刷新父窗口的几种方式小结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 用原生JS实现爱奇艺首页导航栏代码实例

    用原生JS实现爱奇艺首页导航栏代码实例

    这篇文章主要介绍了用原生JS实现爱奇艺首页导航栏代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 微信小程序网络请求模块封装的具体实现

    微信小程序网络请求模块封装的具体实现

    大家做小程序项目的时候肯定会遇到数据对接需求,下面这篇文章主要给大家介绍了关于微信小程序网络请求模块封装的具体实现,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • 微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案

    微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案

    这篇文章主要介绍了微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-01-01
  • 图片img的src不变让浏览器重新加载实现方法

    图片img的src不变让浏览器重新加载实现方法

    图片img的src不变,想让浏览器重新加载怎么办,在图片地址src不变的情况下让浏览器重新加载图片,实际上在src不变时，浏览器直接就去读取缓存
    2013-03-03
  • 使用watch在微信小程序中实现全局状态共享

    使用watch在微信小程序中实现全局状态共享

    这篇文章主要给大家介绍了关于如何使用watch在小程序中实现全局状态共享的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • JS实现数据动态渲染的竖向步骤条

    JS实现数据动态渲染的竖向步骤条

    这篇文章主要为大家详细介绍了JS实现数据动态渲染的竖向步骤条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • javascript 删除select中的所有option的实例

    javascript 删除select中的所有option的实例

    这篇文章主要介绍了javascript 删除select中的所有option的实例的相关资料,希望通过本文能帮助到大家实现这样的功能，需要的朋友可以参考下
    2017-09-09
  • ES6新语法Object.freeze和Object.seal基本使用

    ES6新语法Object.freeze和Object.seal基本使用

    这篇文章主要为大家介绍了ES6新语法Object.freeze和Object.seal基本使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01

最新评论