本文介绍一种基于 promise 缓存与模块化设计的方案，通过单次 ajax 请求加载大型 json 文件（如 5 万条记录），并在整个网站中安全、同步地复用该数据，避免重复请求和作用域问题。
本文介绍一种基于 promise 缓存与模块化设计的方案，通过单次 ajax 请求加载大型 json 文件（如 5 万条记录），并在整个网站中安全、同步地复用该数据，避免重复请求和作用域问题。
在前端开发中，当需要将一个大型静态 JSON 文件（例如 data.json，含数万条结构化记录）作为全局数据源供全站组件使用时，核心挑战有两点：一是异步加载时机不可控导致变量未就绪，二是数据需跨脚本、跨模块安全共享。直接在 <script> 标签中调用 fetch() 后立即访问 dataset 变量必然失败——因为 fetch 是异步操作，而后续 console.log(dataset.length) 在请求完成前就已执行。
✅ 正确解法不是“把数据挂到 window 上”，而是采用 “惰性单例 + Promise 缓存” 模式：首次调用时发起请求并缓存 Promise；后续所有调用均复用同一 Promise，确保数据只加载一次，且调用方以 .then() 或 await 安全获取结果。
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
以下为推荐实现（纯 JavaScript，无需 jQuery）：
✅ 推荐方案：创建 dataService.js（ES 模块）
// js/dataService.js
let dataPromise = null;
export function loadData() {
if (!dataPromise) {
dataPromise = fetch('../js/data.json')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
return res.json();
})
.catch(err => {
console.error('Failed to load data.json:', err);
throw err;
});
}
return dataPromise;
}✅ 在页面中安全使用（支持多种调用方式）
<!-- index.html -->
<script type="module">
import { loadData } from './js/dataService.js';
// 方式1：链式调用（推荐用于初始化逻辑）
loadData().then(data => {
console.log('✅ 全局数据已就绪，共', data.length, '条记录');
// ✅ 此处可安全渲染表格、初始化图表等
renderTable(data);
});
// 方式2：async/await（更直观，需在 async 函数内）
async function initApp() {
try {
const dataset = await loadData();
console.log('? 数据总量：', dataset.length);
// 进行其他依赖数据的操作...
} catch (err) {
alert('数据加载失败，请检查网络或文件路径');
}
}
</script>⚠️ 关键注意事项
- 路径必须准确：fetch('../js/data.json') 中的相对路径需与 dataService.js 的实际位置匹配；建议统一放在 /js/ 下，并用绝对路径 /js/data.json 避免歧义。
- 禁止全局变量污染：不要将 dataset 直接赋值给 window.dataset——这易引发竞态、内存泄漏及调试困难；Promise 缓存是更健壮的替代方案。
-
大文件性能提示：50,000 条 JSON 记录在浏览器中解析可能耗时数百毫秒。如需极致体验，可考虑：
- 后端启用 Gzip/Brotli 压缩（通常压缩率 >70%）；
- 前端添加加载状态 UI（如骨架屏）；
- 对非首屏数据采用虚拟滚动（Virtual Scrolling）渲染表格。
- 错误处理不可省略：网络中断、404、JSON 格式错误等必须捕获并降级处理，否则整站数据功能将静默失效。
✅ 总结
通过封装 loadData() 为返回 Promise 的模块函数，并利用闭包缓存首次请求的 Promise，你既能保证 JSON 文件仅被加载一次，又能以声明式、可预测的方式在任意模块中获取数据——无论 index.html、dashboard.js 还是 report.js，调用 loadData() 得到的都是同一个已解析的数据集（或其 Promise）。这才是面向现代 Web 应用的可持续、可维护的数据加载实践。
