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); // 将响应文本解析为 JSON
    console.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 文件，如配置或数据库数据