Vue.js+Node.js项目后端API正常但前端无数据显示问题求助

核心问题定位 #

问题出在ProjectService.js的getProjects方法实现上，存在两个逻辑错误：

• 返回值为普通回调函数而非Promise对象，导致组件内await无法等待异步请求完成，直接赋值给projects的是函数本身而非接口返回数据
• axios.get是异步方法，没有添加await关键字就直接读取res.data，此时请求尚未完成，拿到的是undefined

修正后的代码 #

ProjectService.js #

import axios from 'axios'

const url ='http://localhost:4000/'
class ProjectService{
  // 获取项目列表
  static async getProjects(){
    try {
      const res = await axios.get(url);
      const data = res.data;
      return data.map(project=>({
        ...project,
        createdAt: new Date(project.createdAt)
      }))
    } catch (error) {
      throw error
    }
  }
}
export default ProjectService

可选验证步骤 #

• 确认后端返回的项目数据中存在createdAt字段，如无则可以删除map逻辑中对应字段的转换代码
• 打开浏览器开发者工具的网络面板，确认前端成功发出了指向http://localhost:4000/的GET请求，且响应内容符合预期
• 在组件的created钩子中打印this.projects，确认数据已经成功赋值

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