Vue中如何将Axios获取的对象数组用于外部函数及QTable？

这是异步请求的时序问题，核心原因是Axios的GET请求是异步执行的：

• 当你调用users()函数时，函数会先执行return usersB，这时候Axios的请求还没完成，所以返回的是空数组。
• 等后续请求成功拿到数据后，usersB数组才会被填充，控制台展开能看到数据是因为浏览器会保留数组的引用，实时更新显示内容。
• 而v-for能正常工作，是因为Vue的响应式系统会监听数组的变化，当数组被填充后自动更新视图。

解决方法 #

方法1：用async/await让函数等待请求完成 #

把users改成异步函数，调用时用await获取结果：

async function users() {
  const usersB = [];
  const response = await axios.get('/api/users');
  usersB.push(...response.data);
  return usersB;
}

// 调用的时候
async function fetchData() {
  const userList = await users();
  console.log(userList); // 这里就能拿到完整数据了
}
fetchData();

方法2：让函数返回Promise #

直接返回Axios的请求Promise，后续用.then()处理结果：

function users() {
  return axios.get('/api/users').then(response => {
    return response.data;
  });
}

// 调用
users().then(userList => {
  console.log(userList); // 拿到数据
});

方法3：在Vue组件中直接管理数据（更适配QTable场景） #

如果是在Vue组件里用QTable，直接把数据放在组件的data中，在created或mounted钩子中发起请求：

<template>
  <q-table :rows="userRows" ... />
</template>

<script>
export default {
  data() {
    return {
      userRows: []
    };
  },
  async created() {
    const response = await axios.get('/api/users');
    this.userRows = response.data;
  }
};
</script>

这样QTable的rows会随着userRows的响应式更新自动渲染数据，也能避免异步时序问题。

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