异步组件加载超时需手动封装 Promise.race 实现超时控制，并配合 Suspense 的 #fallback 或 v-if 分支展示占位内容，确保 reject 错误以触发 fallback，同时支持降级、上报与环境差异化配置。
异步组件加载超时，本质是网络延迟、资源未就绪或脚本执行卡顿导致的 Promise 长时间不 resolve。Vue 不会自动处理超时，需要你主动封装一层带超时控制的异步逻辑，并配合 v-if/v-else 或 <suspense> 的状态分支来展示占位内容。
用 Promise.race 实现超时控制
核心思路：把动态 import 包裹进一个 Promise，并和一个「定时 reject」的 Promise 竞赛。谁先完成，就采用谁的结果。
示例（Vue 3 setup script）：
const loadWithTimeout = (factory, timeout = 5000) => {
return Promise.race([
factory(),
new Promise((_, reject) =>
setTimeout(() => reject(new Error('组件加载超时')), timeout)
)
])
}
// 使用
const AsyncChart = defineAsyncComponent(() =>
loadWithTimeout(() => import('./components/Chart.vue'), 8000)
)
配合 Suspense 显示不同状态
<suspense> 是 Vue 内置的异步组件协调器，它能识别 pending / fallback / resolved 三个阶段。你需要提供 <template #fallback> 作为加载失败或超时时的占位内容。
注意：超时错误需抛出，否则 <suspense> 不会触发 fallback。
- 确保异步工厂函数最终 reject（如上例中的
reject(new Error(...))） - 在
<suspense>内部用<template #fallback>写骨架屏、加载动画或错误提示 - 可结合
onErrorCaptured捕获并记录错误，但不要阻止 fallback 渲染
手动 fallback：v-if 控制加载状态
如果你没用 <suspense>，或者想更精细地管理错误态（比如重试按钮），可以用响应式变量 + v-if 分支：
const component = ref(null)
const loading = ref(true)
const error = ref(null)
loadWithTimeout(() => import('./HeavyModal.vue'))
.then(module => { component.value = module.default })
.catch(err => { error.value = err.message })
.finally(() => { loading.value = false })
模板中：
<component :is="component" v-if="component" />
<div v-else-if="error" class="error">{{ error }} <button @click="retry">重试</button></div>
<div v-else class="skeleton">加载中...</div>
进阶建议：错误降级与用户体验优化
单纯显示“加载失败”不够友好。可考虑这些实践：
- 首次失败后自动降级为轻量静态组件（如用纯 HTML 表格替代 ECharts 图表）
- 记录错误日志并上报（如 Sentry），带上组件路径、超时时间、用户设备信息
- 对非关键组件（如推荐位、广告位）设置更短超时（2s），失败直接隐藏
- 利用
import.meta.env.PROD在生产环境启用超时，在开发环境禁用便于调试
