模块加载失败时需主动捕获：动态导入用try/catch或.catch()处理Promise拒绝，静态导入错误无法捕获，应改用动态导入、监听error事件或构建优化；降级策略包括回退本地模块、禁用功能、重试及状态管理。
模块加载失败时，JavaScript 本身不自动抛出可捕获的异常（比如 import() 动态导入失败会返回 rejected Promise），但你可以主动捕获并做降级处理，关键在于正确使用 try...catch 或 .catch()，并提前设计兜底逻辑。
动态导入（import()）的错误捕获
动态导入返回一个 Promise，失败时被 reject，必须用 Promise 链或 async/await 捕获：
- 用
async/await时，包裹在try...catch中最直观 - 用
.then().catch()时，确保.catch()紧跟在import()后面，避免中间链路干扰 - 注意：
import()的参数必须是字符串字面量或受信任的变量，不能是任意表达式，否则可能在解析阶段报错（SyntaxError），这类错误无法用 try/catch 捕获
静态导入（import）失败的应对思路
静态 import 在模块解析或加载阶段失败（如路径不存在、网络中断、MIME 类型错误）会直接导致整个模块加载中止，并触发 error 事件或终止脚本执行——它无法用 try/catch 捕获。可行策略包括：
- 避免关键功能依赖静态导入失败后仍需运行的场景；核心逻辑尽量用动态导入
- 监听
document或script标签的error事件（适用于通过<script type="module"></script>加载的顶层模块） - 构建时确保模块路径正确、服务端配置支持 ES 模块 MIME 类型（
application/javascript）
常见降级方案设计
捕获失败后，可根据业务需要选择不同兜底方式：
立即学习“Java免费学习笔记（深入）”；
- 回退到本地备用模块：例如加载 CDN 版本失败后，改用打包进主包的轻量实现
- 禁用非核心功能：如图表库加载失败，隐藏图表区域并显示提示“功能暂不可用”
-
延迟重试 + 指数退避：对临时性网络问题，可封装带重试的
loadModule函数 -
预加载标记与状态管理：用全局标志（如
window.__chartLoaded = false）记录加载状态，避免重复尝试或条件渲染
实用示例：带重试和降级的动态加载函数
下面是一个兼顾错误捕获、重试和本地回退的封装：
async function safeImport(modulePath, fallbackPath, maxRetries = 2) {
for (let i = 0; i <= maxRetries; i++) {
try {
return await import(modulePath);
} catch (err) {
if (i === maxRetries && fallbackPath) {
try {
return await import(fallbackPath);
} catch (fbErr) {
throw new Error(`Both ${modulePath} and fallback ${fallbackPath} failed: ${fbErr.message}`);
}
}
await new Promise(r => setTimeout(r, Math.pow(2, i) * 100)); // 指数退避
}
}
}
// 使用
safeImport('https://cdn.example.com/chart.js', './local-chart.js')
.then(mod => mod.renderChart())
.catch(err => console.warn('模块加载彻底失败:', err));
