axios请求返回400状态码时如何获取响应体内容

问题原因 #

Axios 默认配置下，仅当接口返回状态码处于 2xx 区间时才会进入 then 回调，其余状态码都会触发 Promise 拒绝进入 catch 分支。400 状态码属于客户端错误，默认就会进入 catch 逻辑，对应的响应内容存放在 err.response 字段中，你无法拿到响应通常是以下几个原因：

• 自定义的 axios 实例配置了错误的 validateStatus 规则，导致响应结构被篡改
• 全局响应拦截器的错误分支没有完整返回 error 对象，丢失了 response 字段
• catch 分支的错误处理逻辑存在边界遗漏

解决方案 #

1. 修正 axios 实例的基础配置 #

显式声明 validateStatus 规则，确保非 2xx 状态码正常进入 catch 分支且保留完整响应结构：

const axios_instance = axios.create({
  baseURL: '你的接口基础前缀',
  timeout: 10000,
  // 保持默认规则：仅2xx状态码走resolve，其余走reject
  validateStatus: (status) => status >= 200 && status < 300
})

2. 修正全局响应拦截器的错误处理 #

如果你的项目配置了全局响应拦截器，确保错误分支完整返回 error 对象，不要只返回错误字符串：

axios_instance.interceptors.response.use(
  (response) => response,
  (error) => {
    // 不要自定义返回内容，直接抛出完整error对象才能保留response字段
    return Promise.reject(error)
  }
)

3. 优化接口请求的错误处理逻辑 #

补充 catch 分支的边界判断，兼容不同错误场景，同时正确读取响应内容：

const getValidIdTypes = async () => {
  return infoActions.getIdTypes()
  .then(res => {
    if (res.status === 200 || res.status === 201) {
      setValidIdTypes(res.data)
    } else {
      pushToFlasher(res.data)
    }
  })
  .catch(err => {
    // 有响应返回：接口返回了非2xx状态码，比如400、401、500等
    if (err.response) {
      console.log("错误状态码：", err.response.status)
      console.log("错误响应内容：", err.response.data)
      // 可选链兜底，避免响应内容为空时报错
      pushToFlasher(err.response.data ?? "请求参数无效，请检查提交内容")
    } 
    // 请求已发出但无响应：比如网络超时、跨域拦截、服务端未返回内容
    else if (err.request) {
      console.log("请求无响应：", err.request)
      pushToFlasher("网络异常，请检查网络连接后重试")
    } 
    // 请求未发出：配置错误导致请求发起失败
    else {
      console.log("请求发起失败：", err.message)
      pushToFlasher("请求配置错误，请稍后重试")
    }
  })
}

内容的提问来源于stack exchange，提问作者Luis Alfonso Buelvas Betancour