Axios登录POST请求的错误响应打印为undefined，网络面板显示正常

问题根因 #

1. 错误的Axios错误对象取值路径
   当接口返回4xx/5xx类的非成功HTTP状态码时，Axios会将服务端返回的内容包装成错误对象抛出，进入catch分支。这个场景下，直接写console.log(err.data)永远拿不到值——因为服务端响应是嵌套在错误对象的response层级下，完整路径是err.response.data。你看到网络面板能正常返回内容，但是代码打印undefined，本质就是取值路径错了。
2. async/await 与 .then 混用造成的逻辑断层
   你在await请求的链路上额外嵌套了.then回调做打印，既没有在回调中return响应结果让外层变量拿到值，也没有在拿到错误后把提示绑定到组件状态上。这种写法既会让外层的res变量变成undefined，也没法在请求失败时给用户展示对应的错误提示。

修正后的实现 #

const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errors, setErrors] = useState("");

  const { getLoggedIn } = useContext(AuthContext);
  const history = useHistory();

  async function login(e) {
    e.preventDefault();
    setErrors(""); // 提交前清空历史错误提示
    try {
      const loginData = {
        email,
        password,
      };
      // 纯await写法直接拿响应，不再嵌套.then
      const res = await axios.post("http://localhost:5000/auth/login", loginData);
      // 只有请求成功（2xx状态码）才走后续登录态更新、路由跳转逻辑
      await getLoggedIn();
      history.push("/player");
    } catch (err) {
      // 用可选链兼容网络异常场景，正确读取服务端返回的错误提示
      const serverMsg = err.response?.data?.message || err.response?.data?.error || "登录失败，请检查网络后重试";
      setErrors(serverMsg);
      console.log("服务端返回的错误内容：", serverMsg);
    }
  }

  return (
    <div className="authWrapper">
      <form className="box" onSubmit={login}>
        <h1>LOGIN</h1>
        {/* 页面渲染错误提示 */}
        {errors && <div className="error-tip">{errors}</div>}
        <input
          autoComplete="off"
          className="input"
          type="email"
          placeholder="Email"
          onChange={(e) => setEmail(e.target.value)}
          value={email}
        />
        <input
          autoComplete="off"
          className="input"
          type="password"
          placeholder="Password"
          onChange={(e) => setPassword(e.target.value)}
          value={password}
        />
        <button className="submit" type="submit">
          {`Log in${" "}`}
          <FontAwesomeIcon icon={faArrowRight}></FontAwesomeIcon>
        </button>

        <Link to="/register">
          <button className="changeForm">
            {`Register${" "}`}
            <FontAwesomeIcon icon={faSync}></FontAwesomeIcon>
          </button>
        </Link>
      </form>
    </div>
  );
};

export default Login;

实操注意点 #

• 读取错误内容时一定要加可选链兼容：如果出现网络断开、接口跨域被拦截、请求根本没发出去的场景，错误对象里是不存在response属性的，直接强读err.response.data会触发二次报错，导致整个流程中断。
• 写异步逻辑时尽量统一async/await的写法，不要再混用.then链式调用：await拿到的响应对象和.then回调的入参结构完全一致，混写只会平白增加逻辑复杂度，没有任何收益。

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