本文详解如何在 vue.js 中正确等待全部异步 api 调用（如 14 个下拉选项数据）完成后再渲染表单，避免因响应时序不一致导致的 ui 错误或空状态问题。

在 Vue 应用中处理大量并行初始化请求（如为表单填充 14 个关联下拉选项）时，简单使用 v-if="load_list.every(x => x)" 往往失效——根本原因在于 Vue 的响应式系统无法自动追踪数组元素的直接赋值变化（例如 this.load_list[0] = false），导致依赖该数组的计算属性（如 listLoade

✅ 推荐方案：使用 Promise.all() + 响应式状态管理

最健壮、可维护性最强的方式是避免轮询布尔数组，转而集中管理所有请求的 Promise 状态：

export default {
  data() {
    return {
      isLoading: true,
      actor: {},
      categories: [],
      motivations: [],
      // ... 其他下拉数据
    }
  },
  async created() {
    try {
      // 并发发起所有必需的初始化请求
      const [
        actorRes,
        categoriesRes,
        motivationsRes,
        // ... 其他 11 个请求
      ] = await Promise.all([
        API.getActor(this.id),
        API.getCategories(),
        API.getMOTIVATIONS(),
        // ... 其他 axios 调用
      ])

      // 统一赋值（触发响应式更新）
      this.actor = actorRes.data || {}
      this.categories = categoriesRes.data || []
      this.motivations = motivationsRes.data || []
      // ... 其他赋值

    } catch (error) {
      console.error('初始化失败:', error)
      this.$bvToast.toast('加载数据失败，请重试', { variant: 'danger' })
    } finally {
      this.isLoading = false
    }
  }
}

⚠️ 为什么 load_list[0] = false 不生效？

Vue 2 的响应式系统无法检测通过索引直接设置数组项（如 arr[0] = val）或修改数组长度（如 arr.length = 0）。即使你后续调用 this.$forceUpdate()，也属于反模式，破坏响应式设计原则。

若坚持使用布尔标记法（不推荐），必须用 Vue 提供的数组变异方法：

// ❌ 错误：不触发更新
this.load_list[0] = false

// ✅ 正确：使用 $set 或 splice
this.$set(this.load_list, 0, false)
// 或
this.load_list.splice(0, 1, false)

? 进阶优化：封装初始化逻辑 & 错误隔离

对于 14 个请求，建议进一步解耦：

async loadAllOptions() {
  const requests = [
    API.getCategories().catch(() => []),
    API.getMOTIVATIONS().catch(() => []),
    API.getDepartments().catch(() => []),
    // ... 其他请求，每个都带独立错误兜底
  ]
  const [categories, motivations, departments] = await Promise.all(requests)
  this.categories = categories
  this.motivations = motivations
  this.departments = departments
}

这样即使某个接口临时不可用，也不会阻塞整个表单加载，提升用户体验与鲁棒性。

✅ 总结

• 不要用布尔数组轮询：v-if="load_list.every(...)" 易因响应式限制失效；
• 优先使用 Promise.all()：语义清晰、性能最优、错误可控；
• 统一 loading 状态：用单一 isLoading 控制骨架屏/占位符，比 14 个布尔值更简洁可靠；
• 错误处理前置：每个请求单独 catch，避免单点失败导致整个页面白屏；
• Vue 3 用户注意：ref([]) 数组支持直接索引赋值，但 Promise.all() 方案依然更推荐——它本质是逻辑优化，而非框架补丁。

通过以上方式，你的表单将在所有依赖数据就绪后才渲染，彻底告别“下拉为空”“选项闪现”等竞态问题。