javascript 无法真正实现阻塞式同步 http 请求，但可通过顶层 await + 动态 import 确保后续脚本严格在 api 数据就绪后执行，避免全局对象未初始化导致的运行时错误。
javascript 无法真正实现阻塞式同步 http 请求，但可通过顶层 await + 动态 import 确保后续脚本严格在 api 数据就绪后执行，避免全局对象未初始化导致的运行时错误。
在现代 Web 开发中，不存在“将 fetch 变成同步调用”的合法、安全且符合标准的方式——XMLHttpRequest 的 async: false 已被弃用且在多数浏览器中禁用（尤其在主线程中会阻塞 UI，违反现代 Web 性能与用户体验原则）。因此，“让 JS 等待 API 完成再继续”这一需求，必须通过 异步编排（asynchronous orchestration） 实现，而非伪同步。
核心思路是：将依赖初始化数据的所有逻辑，明确置于 API 响应完成之后执行。这要求打破传统 <script src="..."></script> 的静态加载顺序依赖，改用动态、可控的执行流。
✅ 推荐方案：顶层 async IIFE + import() 动态加载
将原 script1.js 中的初始化逻辑重构为一个立即执行的异步函数，并在获取数据后，按需动态导入后续脚本：
<html>
<head>
<!-- 移除所有静态 script 标签 -->
</head>
<body>
<div id="body"></div>
<script type="module">
// ✅ 使用 type="module" 启用顶层 await（现代浏览器支持良好）
async function fetchConfig() {
try {
const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return await res.json();
} catch (err) {
console.error('Failed to load config:', err);
throw err;
}
}
// 初始化全局命名空间（推荐使用冻结对象提升安全性）
window.globalConstants = Object.freeze({});
// 执行异步初始化并串行加载依赖脚本
(async () => {
try {
const configData = await fetchConfig();
// 安全合并到全局对象（避免意外覆盖）
Object.assign(window.globalConstants, configData);
console.log('✅ Config loaded:', window.globalConstants);
// ? 关键：在此之后才加载业务脚本，确保其访问 globalConstants 时已就绪
await import('https://test.com/script2.js');
await import('https://test.com/script3.js');
} catch (err) {
console.error('❌ Initialization failed. Stopping app.', err);
// 可选：渲染错误提示、重试机制或降级 UI
}
})();
</script>
</body>
</html>⚠️ 注意事项与最佳实践
-
type="module"是前提：只有模块脚本支持顶层await；若需兼容旧版浏览器，可用(async () => { ... })()包裹，并显式await（见答案中非模块写法）。 -
避免污染
window：优先使用Object.freeze()或const globalConstants = {...}+ 模块导出，减少全局变量风险。 -
错误必须处理：网络失败、JSON 解析异常、CORS 等均会导致
await拒绝 Promise，务必用try/catch捕获并提供降级策略（如默认配置、离线缓存、用户提示）。 -
不要滥用
class封装一次性初始化：如答案所指出，单例初始化无需类——直接导出一个纯函数getConfigData()更简洁、更易测试、无实例开销。 -
禁止回退到
XMLHttpRequest.sync = true：该模式已被主流浏览器废弃，且会完全冻结页面交互，违背 Web 标准与可访问性要求。
✅ 总结
所谓“同步执行”，本质是控制执行时机而非阻塞线程。通过 async/await 显式声明依赖关系，并配合 import() 动态加载，即可构建清晰、可靠、可维护的初始化链路。这是当前 Web 平台下最健壮、最标准化的解法——接受异步本质，驾驭异步流程，才是专业前端工程化的正确姿势。
