浏览器 JavaScript 不支持真正阻塞主线程的同步网络请求，但可通过延迟加载后续脚本、利用 Promise 链与全局状态管理，确保 window.data 就绪后再执行依赖代码，从而实现逻辑上的“同步初始化”效果。
浏览器 javascript 不支持真正阻塞主线程的同步网络请求，但可通过延迟加载后续脚本、利用 promise 链与全局状态管理，确保 `window.data` 就绪后再执行依赖代码，从而实现逻辑上的“同步初始化”效果。
在现代 Web 开发中，无法也不应通过阻塞主线程（如使用已废弃的 XMLHttpRequest.open(..., false) 或无限轮询）来实现“同步 API 调用”。浏览器明确禁止长时间阻塞主线程——这会导致页面冻结、违背响应式设计原则，并被现代规范（如 Fetch API）彻底移除同步支持。
但您的核心诉求是合理的：让 window.data 在其他脚本（如 script2.js）执行前完成初始化，并保证其为解析后的实际数据（而非 Promise 对象）。以下是专业、可靠且符合最佳实践的解决方案：
✅ 推荐方案：动态加载 + 初始化守卫（推荐用于多脚本依赖场景）
修改 script1.js，不再直接赋值 window.data = fetchData()（这会存入一个 pending Promise），而是：
// src/script1.js
const fetchData = async () => {
const configUrl = 'https://jsonplaceholder.typicode.com/todos/1';
try {
const response = await fetch(configUrl);
if (!response.ok) {
throw new Error(`Network response was not ok: ${response.status} - ${response.statusText}`);
}
const data = await response.json();
console.log('data 0:', data);
return data;
} catch (error) {
console.error('Error fetching data:', error);
throw error; // 确保错误可被捕获，避免静默失败
}
};
// 全局初始化 Promise，所有依赖方 await 此 Promise
window.__INITIAL_DATA_PROMISE__ = fetchData()
.then(data => {
window.data = data; // ✅ 此时 data 是真实对象
console.log('data 1 (resolved):', window.data);
})
.catch(err => {
window.data = null; // 或保留 undefined，便于下游判断
console.warn('Failed to initialize window.data — proceeding with fallback.');
});然后，在 script2.js 开头主动等待初始化完成（无需修改 HTML 加载顺序）：
// src/script2.js
// ✅ 安全等待 window.data 就绪（即使 script1.js 异步执行完）
(async () => {
try {
await window.__INITIAL_DATA_PROMISE__;
console.log('data 2:', window.data); // ✅ 输出真实数据对象
// ✅ 此处可安全执行所有依赖 window.data 的逻辑
} catch (err) {
console.error('Initialization failed in script2:', err);
}
})();⚠️ 注意事项与替代思路
-
不要使用
while(!window.data){}等忙等待：会 100% 占用 CPU，触发浏览器警告甚至强制终止脚本。 -
避免
document.write或同步 XHR：已被现代浏览器弃用或限制，破坏可维护性与安全性。 -
进阶优化（大型项目）：可封装为模块化初始化器（如
initApp().then(...)），配合window.addEventListener('app:ready', ...)自定义事件广播就绪信号。 -
服务端渲染（SSR）或构建时预取：若数据静态或低频更新，可考虑构建阶段注入
window.__PRELOADED_DATA__，彻底规避客户端请求。
✅ 总结
您不需要、也不应该“阻塞线程”，而应拥抱异步本质，通过 Promise 编排 + 显式依赖声明 实现确定性的执行时序。上述方案保持 HTML 结构不变、不侵入其他脚本逻辑、具备错误处理能力，且完全兼容 ES Module 和现代打包工具，是生产环境推荐的标准做法。
