Vue中axios异步加载字段在附加函数内未初始化如何解决

• 你遇到的未初始化问题核心是异步请求时序错误：axios.get是异步非阻塞操作，你在showRepresentativesDialog中调用两个加载方法后，不会等待接口返回赋值就直接执行subtractSets，此时两个字段还停留在初始空值状态。
• 现有代码存在语法混用错误：setup()（Composition API）和data()/methods（Options API）嵌套写法是非法的，ref定义的响应式变量不需要重复在data中声明，且你在data里把allUsers错写成了users，methods定义后多余的冒号也会导致语法解析异常。

• 修正语法结构，不要混用两种API写法，要么全用Options API，要么全用Composition API，以下示例和你原有methods写法适配度最高
• 让两个数据加载方法返回axios请求实例，方便外层等待请求完成
• 用Promise.all等待两个接口全部返回、数据赋值完成后，再执行subtractSets逻辑和弹窗展示

export default {
  data() {
    return {
      representatives: [],
      allUsers: [],
      representativesDialog: false
    }
  },
  methods: {
    loadUsersRepresentatives(facultyID) {
      // 一定要return axios实例，否则外层无法等待请求完成
      return axios.get('getRepresentatives', { params: { facultyID } })
        .then(res => {
          this.representatives = res.data
        })
        .catch(err => {
          // 替换为你的错误处理逻辑
          console.error('加载代表数据失败', err)
        })
    },
    loadAllUsers() {
      // 同理return请求实例
      return axios.get('/getAllUsers')
        .then(res => {
          this.allUsers = res.data
        })
        .catch(err => {
          // 替换为你的错误处理逻辑
          console.error('加载全量用户失败', err)
        })
    },
    subtractSets(obj1, obj2) {
      // 替换为你的差集计算逻辑
    },
    async showRepresentativesDialog(facultyID) {
      // 等待两个接口全部加载完成
      await Promise.all([
        this.loadUsersRepresentatives(facultyID),
        this.loadAllUsers()
      ])
      // 此时数据已经赋值完成，可以正常读取
      this.subtractSets(this.representatives, this.allUsers)
      this.representativesDialog = true
    }
  }
}

如果你要坚持用Composition API写法，只需要把两个ref变量放在setup里定义，把methods里的函数改成普通函数，调用时同样用async/await等待Promise.all执行完成即可，核心的异步等待逻辑完全一致。

内容的提问来源于stack exchange，提问作者Lyubushkino Soglasie