效果：
一、使用 import 静态加载 JSON
原理
- 使用 ES 模块的
import 语法直接引入 JSON 文件。
- Webpack/Vite 等构建工具会将 JSON 文件解析成 JavaScript 对象。
优点
- 简单直接，适合静态数据。
- 不需要额外的网络请求。
- 数据会随着打包文件一起部署。
缺点
使用场景
javascript
复制代码
// 静态加载 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，增加了网络延迟。
使用场景
javascript
复制代码
// 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 等），以及对请求配置有需求时。
javascript
复制代码
//加载代码（原生 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); // 将响应文本解析为 JSON
console.log('Parsed JSON data2:', data); // 打印解析后的 JSON 数据
data.forEach(item => {
console.log(item.name, item.score, item.time);
});
}
};
xhr.send();
javascript
复制代码
//加载代码（使用 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 环境下运行，无法在前端使用。
使用场景
javascript
复制代码
//此方法适用于 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 文件，如配置或数据库数据 |