在Axios中如何捕获浏览器网络面板显示的响应错误体内容？

问题原因 #

你在catch回调中拿到的入参是Axios的错误实例对象，不是直接的HTTP响应对象。对于400这类已经收到服务端返回的错误，实际响应内容挂载在错误实例的response属性下，直接访问error.data自然会返回undefined。

正确写法 #

axios.post(`/api/myendpoint`,
  { 
    data: 2
  },
  {
    headers: {'ACCEPT': 'application/json'}
  })
  .then(response => {
    // 正常响应处理逻辑
  })
  .catch(error => {
    // 优先判断是否存在服务端返回的响应
    if (error.response) {
      // error.response的结构和then回调中拿到的response完全一致
      console.log(error.response.data); 
      // 按你给出的返回结构，提取错误提示的写法：
      const errMessage = error.response.data.data[0]
      console.log(errMessage) // 输出： value does not allow numbers
    } else if (error.request) {
      // 请求已发出但未收到响应的场景，比如网络超时、跨域拦截
      console.log('无响应返回：', error.request)
    } else {
      // 请求未发出的场景，比如配置参数错误
      console.log('请求发起失败：', error.message)
    }
  })

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