红旗渠建设集团有限公司网站,二手物品交易网站开发环境,企业网站关键词放几个,网址短链接在线生成效果#xff1a; 一、使用 import 静态加载 JSON 原理 使用 ES 模块的 import 语法直接引入 JSON 文件。Webpack/Vite 等构建工具会将 JSON 文件解析成 JavaScript 对象。 优点 简单直接#xff0c;适合静态数据。不需要额外的网络请求。数据会随着打包文件一起部署。 缺点 J…效果 一、使用 import 静态加载 JSON 原理 使用 ES 模块的 import 语法直接引入 JSON 文件。Webpack/Vite 等构建工具会将 JSON 文件解析成 JavaScript 对象。 优点 简单直接适合静态数据。不需要额外的网络请求。数据会随着打包文件一起部署。 缺点 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 文件。 优点 支持动态更新适合加载频繁变化的数据。文件不需要打包直接部署即可。 缺点 需要网络支持。相比 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 数据。 优点 支持复杂的请求配置如自定义头部。支持跨域请求结合 CORS 配置。 缺点 代码复杂度稍高相比 fetch。需要引入额外的库如 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 文件。 优点 直接读取文件无需通过网络请求。适合在后端使用。 缺点 只能在 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 文件如配置或数据库数据
