动态导入(import())必须显式捕获异常,推荐在async函数中用try/catch处理,或链式调用.catch();需区分404、语法错误、csp等错误类型并针对性处理,同时全局监听unhandledrejection仅作监控兜底。

动态导入(import())返回一个 Promise,加载失败时会进入 catch 分支,因此必须显式捕获异常,否则会触发全局 unhandledrejection 事件并报错。
使用 try/catch 捕获错误
在 async 函数中调用 import() 时,推荐用 try/catch 处理失败情况,逻辑清晰且易于控制后续行为:
- 将
import()放入try块中,正常加载后解构或使用模块 - 在
catch中接收错误对象(通常是Error实例),可判断错误类型、重试、降级或提示用户 - 注意:
catch捕获的是网络失败、模块路径错误、语法错误、权限拒绝等所有加载阶段异常
用 .catch() 链式处理 Promise
若不使用 async/await,可直接链式调用 .catch():
import('./module.js').then(m => m.default()).catch(err => console.error('加载失败:', err))- 错误对象通常包含
err.message和err.stack,部分环境(如 Webpack)还会提供err.request或err.code字段 - 避免只写
.catch(() => {}),应保留错误信息用于调试
区分错误类型并做针对性处理
不同失败原因适合不同应对策略:
- 404 或网络中断:可记录日志、显示“资源暂不可用”,或自动重试(加防抖和次数限制)
- 模块语法错误或导出缺失:属构建或开发问题,应在测试阶段暴露,生产环境可 fallback 到空对象或默认组件
- CSP 或跨域拒绝:需检查响应头、script-src 策略,前端无法修复,但可提示“请检查网络设置”
全局兜底:监听 unhandledrejection
作为最后一道防线,可在应用初始化时监听未被捕获的 Promise 拒绝:
window.addEventListener('unhandledrejection', event => { console.warn('未捕获的动态导入失败:', event.reason); event.preventDefault(); });- 仅用于监控和告警,**不能替代局部错误处理**,因为此时已失去上下文(比如不知道是哪个模块、哪个操作触发的)
- 建议配合错误上报服务收集
event.reason,辅助定位问题模块
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











