React中使用Axios无法处理409错误问题排查

核心问题原因 #

Axios默认会将4xx/5xx状态码的响应判定为错误，直接抛出异常进入catch分支，不会执行then回调里的逻辑。你在then中写的res.status === 409分支永远不会被触发，同时混用await和then的写法也会混淆异步逻辑的执行流。

修复方案 #

1. 移除then分支中针对409的错误处理，统一在catch中处理所有异常状态码
2. 改用纯async/await写法，避免链式调用的逻辑混乱
3. 确保setLoading(false)在所有分支都能执行到

修改后的请求代码：

try {
  const res = await axiosAuth.post(`/service_provider/products`, values);
  // 仅当响应状态码为2xx时才会进入这里
  if (res.data.success === true) {
    toast.success("Product was created successfully");
  }
  setLoading(false);
} catch (err: unknown) {
  const axiosErr = err as AxiosError;
  if (axiosErr.response) {
    const { status } = axiosErr.response;
    if (status === 404) {
      console.log(axiosErr.response.data);
      navigate("/404");
    } else if (status === 409) {
      toast.error("Conflict");
    }
  } else {
    Swal.fire({
      title: "Error",
      text: "Failed to store product",
      icon: "error",
      confirmButtonText: "OK",
    });
  }
  setLoading(false);
}

额外排查点 #

如果修复后Toast还是不显示，需要确认：

• Toast组件（比如react-toastify）是否已在应用根组件中正确配置ToastContainer
• 当前组件是否处于Toast的上下文范围内
• 浏览器控制台是否有Toast相关的报错信息

可选配置（不推荐） #

如果一定要让4xx状态码进入then分支，可以修改Axios实例的validateStatus配置，自定义错误判定规则：

const instanceAxios = axios.create({
  baseURL: `${process.env.REACT_APP_API_URL}`,
  validateStatus: function (status) {
    return status < 500; // 仅将5xx状态码判定为错误
  }
});

但这种做法违背了常规的HTTP错误处理逻辑，不建议在生产环境使用。

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