基于Promise缓存与模块化设计，对含数万条记录的大型JSON文件仅发起一次AJAX请求，将解析后的数据安全暴露为全局可访问对象，避免重复请求与作用域丢失。通过单例式数据加载器封装，利用Promise缓存加载状态，确保异步安全、无竞态条件，实现单次请求、多处消费。
本文介绍一种基于 Promise 缓存与模块化设计的方案，实现对大型 JSON 文件（如含 5 万+ 条记录的 data.json）仅一次 Ajax 请求，并将解析后的数据安全、可靠地暴露为全局可访问对象，避免重复请求与作用域丢失问题。
在 Web 开发中，经常需要把一份大型静态 JSON 数据（例如 data.json，内含数万条结构化记录）供全站多个组件或脚本共享使用。核心挑战在于：既要确保只发起一次 HTTP 请求（节约带宽、降低服务器负载），又要保证数据加载完成后其他脚本才能安全读取。常见的 dataset is not defined 或 console.log(dataset.length) 报错，根源在于 JavaScript 异步机制：fetch() 是异步操作，而紧随其后的同步脚本（例如 ）在数据尚未返回时便执行，自然无法访问到数据。
一种更干净的做法是：不把数据直接绑定到 window.dataset 上污染全局作用域，而是封装一个可复用的 DataLoader 模块，利用 Promise 缓存加载状态。无论调用多少次，最终获取的都是同一份已解析的数据：
长期稳定更新的攒劲资源： >>>点此立即查看<<<
// js/dataLoader.js（ES Module）
let dataPromise = null;
export function loadJSONData() {
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('数据加载失败:', err);
throw err;
});
}
return dataPromise;
}
在 index.html 中通过
部门 姓名 工时