Axios请求Express.js接口返回400时无法获取自定义响应JSON怎么办

问题原因 #

axios 默认配置下，仅HTTP状态码处于2xx范围的响应会进入正常resolve流程，400属于客户端错误类状态码，会直接抛出异常进入catch块。直接打印error对象只会输出默认的请求失败提示，你需要的服务端自定义响应内容存储在error对象的response属性下。

解决方案 #

调整catch块的处理逻辑，优先判断是否存在error.response（排除网络中断、跨域拦截等未收到服务端响应的场景），直接取error.response.data即可拿到你定义的JSON响应：

async function submitRegister() {
    try {
      const responseFromServer = await axios.post('http://localhost:5000/register', {
        value1: value1,
        value2: value2,
        value3: value3,
        value4: value4,
        value5: value5
      }, {
        headers: {
          'Content-Type': 'application/json'
        },
        withCredentials: true
      });

      if (responseFromServer.status === 201) {
        console.log(responseFromServer);
      } else {
        console.log(responseFromServer);
      }

    } catch (error) {
      // 已收到服务端响应但状态码非2xx范围
      if (error.response) {
        // 输出完整的自定义响应JSON
        console.log(error.response.data);
        // 按需取字段使用即可，例如：const errMsg = error.response.data.message
      } else {
        // 未收到服务端响应的场景，比如网络故障、跨域被拦截
        console.log('请求异常：', error.message);
      }
    }
  }

可选配置（不推荐） #

如果你希望400等状态码也进入正常的try流程，可以全局配置validateStatus自定义状态码校验规则：

// 全局配置，所有axios请求生效
axios.defaults.validateStatus = function (status) {
  // 2xx、4xx范围的状态码都视为成功返回
  return status >= 200 && status < 500;
}

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