当前位置: 首页 > news >正文

json数据四大加载方式

效果:

一、使用 import 静态加载 JSON

原理
  1. 使用 ES 模块的 import 语法直接引入 JSON 文件。
  2. Webpack/Vite 等构建工具会将 JSON 文件解析成 JavaScript 对象。
优点
  1. 简单直接,适合静态数据
  2. 不需要额外的网络请求
  3. 数据会随着打包文件一起部署。
缺点
  • JSON 文件只能是静态的,构建后无法动态更新。
使用场景
  • 配置文件或不需要动态更新的数据。
// 静态加载 JSON 文件之将 random_data.json 文件放在项目的 src 目录下
import jsonData from '@/views/json/random_data.json';const loadJSON = () => {console.log('Parsed JSON data2:', data); // 打印解析后的 JSON 数据}onMounted(() => {// 调用函数来加载JSON文件loadJSON();
});

二、使用 fetch 动态加载 JSON

原理
  • 使用浏览器的 fetch API,通过 HTTP 请求动态加载 JSON 文件。
优点
  1. 支持动态更新,适合加载频繁变化的数据。
  2. 文件不需要打包,直接部署即可。
缺点
  1. 需要网络支持
  2. 相比 import,增加了网络延迟。
使用场景
  • 加载动态数据或外部接口返回的 JSON 文件。
// public\json\random_data.json 将 random_data.json 文件移动到 public 文件夹中
const loadJSON = () => {fetch('/json/random_data.json') // 请求 public 文件夹中的 JSON 文件.then(response => {if (!response.ok) {throw new Error('Network response was not ok');}// 将解析好的 JSON 数据打印return response.json(); // 将响应解析为 JSON}).then(data => {console.log('Parsed JSON data2:', data); // 打印解析后的 JSON 数据data.forEach(item => {console.log(item.name, item.score, item.time);});}).catch(error => {console.error('Error loading JSON:', error);});
};onMounted(() => {// 调用函数来加载JSON文件loadJSON();
});

三、使用 AJAX 动态加载 JSON

原理
  • 使用传统的 AJAX 技术(如 XMLHttpRequest 或工具库如 Axios)加载 JSON 数据。
优点
  1. 支持复杂的请求配置(如自定义头部)。
  2. 支持跨域请求(结合 CORS 配置)。
缺点
  1. 代码复杂度稍高(相比 fetch)。
  2. 需要引入额外的库(如 Axios)。
使用场景
  • 项目中需要多种网络请求(GET、POST 等),以及对请求配置有需求时。
//加载代码(原生 XMLHttpRequest)
const xhr = new XMLHttpRequest();
xhr.open('GET', '/data/random_data.json', true); // 请求路径指向 public 文件夹
xhr.onload = () => {if (xhr.status === 200) {const data = JSON.parse(xhr.responseText); // 将响应文本解析为 JSONconsole.log('Parsed JSON data2:', data); // 打印解析后的 JSON 数据data.forEach(item => {console.log(item.name, item.score, item.time);});}
};
xhr.send();
//加载代码(使用 Axios)
import axios from 'axios';axios.get('/data/random_data.json') // 请求 public 文件夹中的 JSON 文件.then(response => {const data = response.data;console.log('Parsed JSON data2:', data); // 打印解析后的 JSON 数据data.forEach(item => {console.log(item.name, item.score, item.time);});}).catch(error => {console.error('Error loading JSON:', error);});

四、通过 Node.js fs 模块加载

原理
  • 在 Node.js 环境下,使用 fs 模块直接读取本地 JSON 文件。
优点
  1. 直接读取文件,无需通过网络请求
  2. 适合在后端使用。
缺点
  • 只能在 Node.js 环境下运行,无法在前端使用。
使用场景
  • 在服务器端读取配置文件或其他静态数据。
//此方法适用于 Node.js 环境。确保 JSON 文件路径相对于脚本是正确的。
const fs = require('fs');fs.readFile('./data/random_data.json', 'utf8', (err, data) => {if (err) {console.error('Error reading JSON:', err);return;}const jsonData = JSON.parse(data); // 解析 JSON 内容console.log('Parsed JSON data2:', jsonData ); // 打印解析后的 JSON 数据jsonData.forEach(item => {console.log(item.name, item.score, item.time);});
});

五、总结

方式优点缺点使用场景
Import简单直接,数据随打包文件发布只能加载静态数据静态数据,JSON 内容固定,不需要动态更新
Fetch支持动态更新,异步加载依赖网络,请求时间较慢浏览器环境,动态加载 JSON 文件或外部接口
AJAX支持复杂请求配置代码复杂度稍高需要复杂请求(如 POST)或用工具库时
Node.js无需网络,直接读取文件仅限于服务器端服务器端场景,后端读取 JSON 文件,如配置或数据库数据

http://www.lryc.cn/news/489558.html

相关文章:

  • JavaScript 中的数组(Array)对象的内置方法
  • 网络安全之国际主流网络安全架构模型
  • 电子应用设计方案-16:智能闹钟系统方案设计
  • 【FRP 内网穿透 从0到1 那些注意事项】
  • 力扣 LRU缓存-146
  • Elasticsearch简介与实操
  • 用python将一个扫描pdf文件改成二值图片组成的pdf文件
  • Failed to start Docker Application Container Engine
  • ESLint的简单使用(js,ts,vue)
  • 实景三维赋能国土空间智慧治理
  • 树链剖分(重链剖分)
  • 幻读是什么?用什么隔离级别可以防止幻读?
  • [Unity Demo]从零开始制作空洞骑士Hollow Knight第二十集:制作专门渲染HUD的相机HUD Camera和画布HUD Canvas
  • 智能安全配电装置在高校实验室中的应用
  • 网络安全等级保护测评机构管理办法(全文)
  • Flutter:shared_preferences数据存储,数据持久化,token等信息存储
  • FileProvider高版本使用,跨进程传输文件
  • python学习记录18
  • 云原生之k8s服务管理
  • redis工程实战介绍(含面试题)
  • 再次讨论下孤注一掷
  • LeetCode46.全排列
  • 蓝桥杯-洛谷刷题-day4(C++)
  • c++总复习
  • 设计模式之策略模式-工作实战总结与实现
  • E - 11/22 Subsequence题解
  • PyPI 攻击:ChatGPT、Claude 模仿者通过 Python 库传播 JarkaStealer
  • 单片机学习笔记 9. 8×8LED点阵屏
  • 【大模型-智能体】AutoGen Studio测试和导出工作流程
  • 【Linux】-学习笔记04