Vue3组件异步数据属性赋值问题：如何获取API返回JSON对象

问题根源 #

你在data中直接调用异步API方法，得到的是Promise对象而非实际数据——因为data函数是同步执行的，异步操作还未完成就返回了Promise，自然无法渲染正确数据。

修正步骤 #

1. 优化api.js的异步写法

避免await与then混用，简化代码逻辑，确保方法返回正确的Promise（最终会解析为客户数据）：

// api.js
async get_customers() {
  try {
    const response = await DataService.get_all_customers();
    return response.data;
  } catch (e) {
    console.log(e);
    // 捕获错误后返回默认值，避免组件报错
    return [];
  }
}

2. 调整Vue组件的赋值逻辑

不要在data中直接调用异步方法，改用**生命周期钩子（如created）**执行异步操作，等待结果后再赋值给customers：

import api from "@/service/api";

export default {
  data() {
    return {
      // 初始化空数组，避免渲染时出现undefined
      customers: []
    };
  },
  async created() {
    // 等待API返回结果后赋值
    this.customers = await api.get_customers();
  },
  methods: {
    // 原api方法可删除，直接使用导入的api实例即可
    // ...其他业务方法
  }
};

补充说明 #

• 保持api.js独立的需求完全可以满足：导入后直接调用其方法即可，无需在组件内封装api()方法。
• 如果需要加载状态（比如显示loading），可以在data中新增isLoading: false，调用API前设为true，赋值完成后设为false。

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