动态导入(import())失败必须用try...catch捕获,因其返回Promise,错误不会冒泡到全局;await需在async函数内使用,网络中断、404、CORS等均触发catch,错误类型多为TypeError或SyntaxError。

动态导入(import())失败时,必须用 try...catch 捕获,它返回的是 Promise,错误不会冒泡到全局,也不能用 window.onerror 或 unhandledrejection 可靠捕获。
用 try...catch 包裹 import() 调用
这是最直接、最可靠的方式。因为 import() 返回 Promise,拒绝(reject)时会抛出错误,try...catch 能捕获该异常:
- 确保
await import(...)写在async函数内 - 网络中断、404、CORS、MIME 类型错误、语法错误等都会触发
catch - 错误对象通常是
TypeError或SyntaxError,具体取决于失败原因
示例:
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
async function loadModule() {
try {
const module = await import('./non-existent.js');
return module;
} catch (err) {
console.error('动态导入失败:', err.message);
// 可降级处理,如显示提示、加载备用模块、记录错误等
}
}配合 Promise.catch() 处理(不使用 async/await)
如果不在 async 函数中,可直接链式调用 .catch():
- 适用于事件回调、模块初始化等非 async 上下文
- 注意:
.catch()只捕获 Promise rejection,不捕获同步异常(但 import() 本身是异步的,所以没问题)
示例:
import('./feature.js')
.then(module => {
module.init();
})
.catch(err => {
console.warn('加载 feature.js 失败', err);
// 触发兜底逻辑
});统一错误监控(可选增强)
虽然不能依赖全局钩子捕获所有 import 错误,但可以封装一个安全导入函数,集中处理和上报:
- 添加重试机制(如失败后延迟重试一次)
- 记录错误类型、模块路径、用户环境(UA、网络状态)
- 避免重复上报同一模块错误
示例封装:
async function safeImport(path, options = {}) {
const { retry = 1, timeout = 5000 } = options;
<p>for (let i = 0; i <= retry; i++) {
try {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), timeout);</p><pre class="brush:php;toolbar:false;"> // 注意:原生 import() 不支持 signal,此超时仅作示意;实际中需靠外层控制或服务端配合
const mod = await import(path);
clearTimeout(timeoutId);
return mod;
} catch (err) {
if (i === retry) throw err;
await new Promise(r => setTimeout(r, 300 * (i + 1)));
}} }
常见错误类型与排查提示
捕获到的错误通常包含关键线索,可针对性处理:
-
TypeError: Failed to fetch→ 网络问题或跨域拦截(检查 CORS、HTTPS 混合内容) -
TypeError: Cannot resolve module 'xxx'(Webpack/Vite 报错)→ 构建路径错误或文件未打包 -
SyntaxError: Unexpected token→ 加载了非 JS 内容(如 HTML 错误页、JSON 文件),检查响应体和 MIME 类型 -
NetworkError when attempting to fetch resource(Safari)→ 兼容性相关,需确认路径有效性
建议在 catch 中打印 err.stack 和 err.name,便于定位。

















