React使用axios提交登录表单报错error.response未定义如何解决

算力阿峰

2026-11-7

登录请求触发 error.response is undefined 报错修复方案

报错根因

这个报错的核心原因非常直接：当前catch块捕获的错误对象里，压根没有response属性，代码却直接链式读取error.response.status，自然触发类型错误。
会出现error.response不存在的常见场景包括：

浏览器跨域拦截了请求，根本没把后端响应传回前端
本地登录服务http://localhost:4000未正常启动，前端完全拿不到任何HTTP响应
网络中断、请求超时，请求未走完完整的HTTP响应流程
项目配置的axios拦截器手动抛出了不带response结构的自定义错误

原代码的问题点

原catch块没有做错误属性的兜底判断，默认拿到的所有错误都带response字段，一旦遇到无响应的异常场景，直接把原本的业务错误提示逻辑冲垮，抛出未捕获的类型异常。

修复代码

直接替换catch块的逻辑，增加空值兜底判断即可：

.catch(error => {
  setLoading(false);
  // 先校验response是否存在，存在时再读取状态码
  if (error.response) {
    if (error.response.status === 401) {
      setError(error.response.data.message);
    } else {
      setError("Something went wrong. Please try again later.");
    }
  } else {
    // 无响应场景的兜底提示
    setError("无法连接到登录服务，请检查网络或稍后重试");
    // 可打印error对象定位具体异常原因
    console.error("请求异常详情：", error);
  }
});