本文介绍在 vue.js 中优雅等待多个异步 api 请求全部完成后再渲染表单界面的方法，避免因部分数据未就绪导致 ui 错误或空白，重点讲解 promise.all、响应式更新与强制重渲染的适用场景及最佳实践。
在 Vue 应用中处理多路关联数据（如下拉选项、多对多关系）时，常见需求是：必须等所有依赖的 API 请求全部返回成功后，才展示主表单容器。你当前采用的 load_list 布尔数组 + v-if="load_list.every(x => x)" 方案逻辑合理，但失效的根本原因在于：Vue 无法自动侦测数组索引赋值（如 this.load_list[0] = false）的响应式变化 —— 这是 Vue 2 的经典限制（Vue 3 的 Proxy 机制已解决，但多数项目仍基于 Vue 2）。
✅ 推荐方案：使用 Promise.all() + async/await（最简洁可靠）
与其维护一长串布尔状态，不如直接聚合所有请求 Promise，在全部 resolve 后统一更新数据并切换加载态：
export default {
data() {
return {
loading: true,
actor: {},
categories: [],
motivations: [],
// 其他下拉数据...
}
},
async created() {
try {
// 并发发起全部 14 个 API 请求（推荐：使用 axios.all 或 Promise.all）
const [
actorRes,
categoriesRes,
motivationsRes,
// ... 其他 11 个请求
] = await Promise.all([
API.getActor(this.id),
API.getCategories(),
API.getMotivations(),
// ... 其他请求调用
])
// 统一赋值（响应式安全）
this.actor = actorRes.data || {}
this.categories = categoriesRes.data || []
this.motivations = motivationsRes.data || []
// ... 其他数据
} catch (error) {
console.error('Failed to load form dependencies:', error)
this.$bvToast.toast('加载数据失败，请重试', { variant: 'danger' })
} finally {
this.loading = false // ✅ 响应式属性，触发 v-if 切换
}
}
}<!-- 模板中只需一个 loading 控制 -->
<b-container v-if="!loading">
<actor-form :actor="actor"
:categories="categories"
:motivations="motivations" />
</b-container>
<b-spinner v-else label="Loading..." />✅ 优势：代码清晰、错误集中处理、无响应式陷阱、天然支持并发（比串行快数倍）、符合现代 Vue 实践。
⚠️ 若必须保留 load_list 模式（如需细粒度加载反馈）
请改用 Vue.set() 或 this.$set() 确保响应式更新：
data() {
return {
load_list: Array(14).fill(true), // 初始化 14 个 true
}
},
methods: {
markLoaded(index) {
this.$set(this.load_list, index, false) // ✅ 强制响应式更新
}
},
created() {
API.getActor(this.id)
.then(a => this.getActor(a))
.catch(console.error)
.finally(() => this.markLoaded(0)) // 而非 this.load_list[0] = false
}同时，listLoaded 计算属性可保留，但模板中建议用 v-show 替代 v-if 避免重复销毁重建：
立即学习“前端免费学习笔记（深入）”；
<b-container v-show="listLoaded"> <!-- 表单内容 --> </b-container>
? 不推荐的“强制重渲染”方案（如 :key="componentKey++）
虽然 :key 触发重新挂载能绕过响应式问题，但它会：
- 销毁并重建整个
及其子组件（含表单状态、焦点、滚动位置丢失）； - 掩盖根本问题（响应式更新失效），增加维护成本；
- 在复杂表单中引发意外副作用（如未保存的输入被清空）。
仅当极少数不可控的第三方组件存在响应式缺陷时作为临时补丁，绝不作为常规方案。
✅ 最佳实践总结
| 场景 | 推荐方式 |
|---|---|
| 所有请求可预知、无强顺序依赖 | Promise.all([...]) + async/await（首选） |
| 需显示各模块独立加载状态（如分区块骨架屏） | this.$set() 管理布尔数组 + v-show |
| 部分请求依赖前序结果（如级联下拉） | await 串行调用，或用 async/await + 条件逻辑 |
| Vue 3 项目 | 直接使用 ref([]) + 索引赋值（Proxy 天然响应式） |
最后提醒：14 个并发请求虽可行，但建议评估是否可通过 DRF 的 select_related / prefetch_related 或 GraphQL 合并查询来减少请求数量——这才是性能与体验的终极优化方向。
