异步组件加载超时怎么办？手把手教你配置加载失败的占位逻辑教程-Vue.js-PHP中文网

异步组件加载超时需手动封装 promise.race 实现超时控制，并配合 suspense 的 #fallback 或 v-if 分支展示占位内容，确保 reject 错误以触发 fallback，同时支持降级、上报与环境差异化配置。

异步组件加载超时怎么办？手把手教你配置加载失败的占位逻辑教程

异步组件加载超时，本质是网络延迟、资源未就绪或脚本执行卡顿导致的 Promise 长时间不 resolve。Vue 不会自动处理超时，需要你主动封装一层带超时控制的异步逻辑，并配合 v-if/v-else 或 <suspense></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></suspense> 是 Vue 内置的异步组件协调器，它能识别 pending / fallback / resolved 三个阶段。你需要提供 <template></template> 作为加载失败或超时时的占位内容。

注意：超时错误需抛出，否则 <suspense></suspense> 不会触发 fallback。

确保异步工厂函数最终 reject（如上例中的 reject(new Error(...))）
在 <suspense></suspense> 内部用 <template></template> 写骨架屏、加载动画或错误提示
可结合 onErrorCaptured 捕获并记录错误，但不要阻止 fallback 渲染

手动 fallback：v-if 控制加载状态

如果你没用 <suspense></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"></component><div v-else-if="error" class="error">{{ error }} <button>重试</button>
</div>
<div v-else class="skeleton">加载中...</div>