json数据四大加载方式

效果:

一、使用 import 静态加载 JSON

原理
  1. 使用 ES 模块的 import 语法直接引入 JSON 文件。
  2. Webpack/Vite 等构建工具会将 JSON 文件解析成 JavaScript 对象。
优点
  1. 简单直接,适合静态数据
  2. 不需要额外的网络请求
  3. 数据会随着打包文件一起部署。
缺点
  • JSON 文件只能是静态的,构建后无法动态更新。
使用场景
  • 配置文件或不需要动态更新的数据。
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 文件。
优点
  1. 支持动态更新,适合加载频繁变化的数据。
  2. 文件不需要打包,直接部署即可。
缺点
  1. 需要网络支持
  2. 相比 import,增加了网络延迟。
使用场景
  • 加载动态数据或外部接口返回的 JSON 文件。
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 数据。
优点
  1. 支持复杂的请求配置(如自定义头部)。
  2. 支持跨域请求(结合 CORS 配置)。
缺点
  1. 代码复杂度稍高(相比 fetch)。
  2. 需要引入额外的库(如 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 文件。
优点
  1. 直接读取文件,无需通过网络请求
  2. 适合在后端使用。
缺点
  • 只能在 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 文件,如配置或数据库数据
相关推荐
面朝大海,春不暖,花不开2 天前
结构化数据格式解析:JSON 与 XML 的技术应用与实践
xml·json
PythonicCC2 天前
Django核心知识点详解:JSON、AJAX、Cookie、Session与用户认证
ajax·django·json
-凌凌漆-2 天前
【Qt】Qt QML json处理
开发语言·qt·json
racerun3 天前
UniApp中的pages.json 和 tabBar
uni-app·json
我命由我123453 天前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
Code季风3 天前
将 gRPC 服务注册到 Consul:从配置到服务发现的完整实践(上)
数据库·微服务·go·json·服务发现·consul
yjb.gz3 天前
Oracle函数JSON_TABLE使用
数据库·oracle·json
百锦再5 天前
.Net配置文件appsetting.json的几种读取方法
chrome·json·.net·依赖注入·appsetting·web.config
葬歌倾城7 天前
JSON的缩进格式方式和紧凑格式方式
c#·json
火车叨位去19497 天前
Java中的JSON序列化和反序列化
json