API请求错误为何总是进入catch块？登录接口异常排查求助

核心原因 #

Axios 默认会将非2xx范围内的HTTP状态码（比如你截图里的错误状态码）判定为请求失败，自动触发catch块，不会进入try里的正常流程处理。这就是Postman能拿到响应，但代码里走catch的根本原因。

解决方案一：修改Axios状态码验证规则 #

在请求时添加validateStatus配置，让Axios不把200-499的状态码视为错误，所有服务器有响应的情况都会进入try块，你可以自行判断状态码处理：

const handleSubmitLogin = async (input) => {
  try {
    // 添加validateStatus配置，放宽状态码判定范围
    const result = await axios.post(`${BASE_URL}/users/client/login`, input, {
      validateStatus: (status) => status >= 200 && status < 500
    });
    if (result.status === 200 || result.status === 201) {
      // 登录成功逻辑
      await setAuthKey(result.data.data.token);
      await setLoggedUser(JSON.stringify(result.data.data));
      dispatch(setUserLogin());
      dispatch(setDataLogin(result.data.data));
    } else {
      // 登录失败，直接取服务器返回的错误信息
      setModalActive({ status: true, data: result.data.message });
    }
  } catch (error) {
    // 仅捕获网络错误、服务器无响应等极端情况
    console.log(error);
    setModalActive({ status: true, data: translations["please.try.again"] });
  }
};

解决方案二：在Catch块中获取服务器错误响应 #

直接利用Axios错误对象里的error.response属性（包含服务器返回的完整响应数据），在catch里处理错误信息，更符合Axios默认设计逻辑：

const handleSubmitLogin = async (input) => {
  try {
    const result = await axios.post(`${BASE_URL}/users/client/login`, input);
    // 登录成功逻辑
    await setAuthKey(result.data.data.token);
    await setLoggedUser(JSON.stringify(result.data.data));
    dispatch(setUserLogin());
    dispatch(setDataLogin(result.data.data));
  } catch (error) {
    console.log(error);
    // 判断是否存在服务器返回的响应
    if (error.response) {
      // 优先取服务器返回的错误提示，兜底用默认文案
      const errorMsg = error.response.data.message || translations["please.try.again"];
      setModalActive({ status: true, data: errorMsg });
    } else {
      // 无响应场景（如网络中断）
      setModalActive({ status: true, data: translations["please.try.again"] });
    }
  }
};

注意事项 #

• 要确保和后端返回的错误结构匹配：从你的截图来看，错误信息存在response.data.message字段，需和后端实际返回字段对应。
• 方案二更贴合Axios的设计习惯，推荐优先使用。

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