Postman请求正常但Axios调用返回undefined属性问题排查

嘿，我一眼就看出问题出在哪了——你没搞清楚Axios的响应结构！

Postman能正常拿到数据是因为它直接展示了服务器返回的原始JSON，但Axios会把服务器响应包裹在一个对象里，真正的业务数据其实在res.data属性里，而不是直接挂在res对象上。你现在直接访问res.credit和res.points，当然会得到undefined啦。

修改你的前端代码 #

把访问响应属性的地方改成res.data.xxx就行：

fetchUserData = (user) => { 
  axios.post('api', { username: user }) 
    .then((res) => { 
      // 重点：从res.data里取数据
      this.setState({ credit: res.data.credit, points: res.data.points }) 
      console.log(`this is user stats\ncredit:${res.data.credit}\npoints:${res.data.points} for the user: ${user}`) 
    }) 
}

额外给后端提个小优化 #

你的后端代码现在没有处理“用户不存在”的情况，会导致请求一直处于挂起状态，建议补充上：

router.post('/', (req, res) => { 
  UserData.findOne({ username: req.body.username }, (err, user) => { 
    if (err) { 
      console.log('Error in fetching user from mongodb: ' + err); 
      return res.status(500).send(err); // 加状态码+return，避免后续代码执行
    }
    if (user) { 
      console.log('fetching data for: ' + user.username); 
      console.log(user); 
      res.send(user); 
    } else {
      // 用户不存在时返回404和提示信息
      res.status(404).send({ message: 'User not found' });
    }
  }); 
})

这样修改后，你的应用就能正常拿到用户的credit和points数据啦。

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