使用axios POST提交表单时无法在控制台查看response.data

我用POST接口提交表单数据，按代码逻辑提交后控制台应该能看到response.data（已经用console.log输出），但实际看不到。试了console.log(response)、console.log(data)也都没用。问题代码如下：

const onSubmithandler = async (data) => {
  await axios
    .post("http://localhost:5000..", data)
    .then((response) => {
      console.log(response.data);
      reset();
      setMessage("User registered successfully");
    })
    .catch((error) => console.log(error));
};

提交表单时理应看到response.data，但始终不显示，这是为什么？

• 接口地址错误：你的接口URL末尾多了两个点（http://localhost:5000..），这会导致请求无法正确发送到后端，自然不会进入then分支输出日志。把地址改成正确的格式，比如http://localhost:5000或者加上具体接口路径（如http://localhost:5000/api/register）。
• 请求失败走了catch分支但日志不明显：如果地址修正后还是没日志，可能请求失败进入了catch，但你只输出error，有时候浏览器控制台可能没展示完整错误信息。改成console.log('请求失败:', error.response || error)，能看到更详细的失败原因，比如404、500状态码或者后端返回的错误内容。
• async/await与.then混用导致逻辑混乱：你同时用了await和.then，虽然语法合法，但容易让逻辑变模糊。建议统一写法，比如改成try/catch：

  const onSubmithandler = async (data) => {
    try {
      const response = await axios.post("http://localhost:5000", data);
      console.log(response.data);
      reset();
      setMessage("User registered successfully");
    } catch (error) {
      console.log('请求出错:', error.response || error);
    }
  };
  

• 浏览器控制台过滤设置问题：检查浏览器控制台的过滤选项，是不是不小心选了"Errors"或"Warnings"，切换到"All"就能看到所有日志输出了。
• 后端未返回有效数据：如果请求确实成功了，但response.data为空，那大概率是后端接口没有返回响应体。需要去排查后端代码，确认接口是否正确返回了数据。

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