VueJS中如何等待所有API请求完成后再渲染视图？

问题核心 #

你遇到的问题本质是Vue2无法检测数组通过索引直接修改的变化——直接给load_list[0] = false这类操作不会触发响应式更新，所以即便所有请求完成，computed属性也不会重新计算，视图自然不会更新。

解决思路 #

一、修复现有数组方案的响应式问题

Vue2对数组的响应式监听依赖特定方法，不能直接通过索引修改元素，你可以用以下两种方式修改：

1. 使用this.$set更新数组元素：

// 在请求的finally回调里改成这样
this.$set(this.load_list, 0, false)

2. 用数组splice方法修改：

this.load_list.splice(0, 1, false)

修改后，数组的变化会被Vue检测到，computed属性listLoaded会重新计算，视图就能正常触发更新。

二、更简洁的优化方案：用Promise.all统一管理请求

维护14个元素的状态数组太繁琐，直接把所有API请求包装成Promise数组，用Promise.all/Promise.allSettled等待全部完成后再渲染：

1. 定义单个加载状态：

data() {
  return {
    isAllLoaded: false
  }
}

2. 在created钩子中批量处理请求：

created() {
  // 把所有需要执行的API请求整理成Promise数组
  const requestTasks = [
    API.getActor(this.id).then(a => this.getActor(a)),
    API.getCategoryList().then(res => this.categoryList = res.data),
    API.getMotivationList().then(res => this.motivationList = res.data),
    // 剩余11个API请求按同样格式添加
  ]

  // 等待所有请求完成（无论成功/失败）
  Promise.allSettled(requestTasks)
    .then(() => {
      this.isAllLoaded = true
    })
    .catch(err => console.error('请求异常:', err))
}

3. 视图中用状态控制渲染：

<b-container v-if="isAllLoaded">
  <!-- 表单内容 -->
</b-container>

• 若要求所有请求必须成功才渲染，把Promise.allSettled换成Promise.all即可。

这种方式不用维护大量状态变量，代码更简洁，也从根源避免了响应式问题。

内容的提问来源于stack exchange，提问作者Bring Coffee Bring Beer