axios 中设置拦截（ interceptors.response） error.response.status undefined 没有值的问题分析处理

axios.interceptors.response.use(response => Promise.resolve(response),
  error => { // 这里对 error 预期结果是包含具体错误信息和状态码

    if (error && error.response && error.response.status) {
      switch (error.response.status) {
        case 500:
          // do something...
          break
        case 404:
          // do something...
          break
        default:
          // do something...
          break
      }
    }
  })

事与愿违，当服务器发生错误时， error 提供的信息永远只有：'Error: Network Error'

跟源码进去，然后发现开发者在注释里清楚的解释了为什么，翻译总结就是：balabala…不是我不给你们错误信息，是 TM 浏览器不给我啊 balabala

// Handle low level network errors
request.onerror = function handleError() {
  // Real errors are hidden from us by the browser
  // onerror should only fire if it's a network error
  reject(createError('Network Error', config, null, request));

  // Clean up request
  request = null;
}

 

不过好消息是，自己在业务逻辑里定义的错误信息是能够获取到的。
立刻验证了下，在请求登录验证方法里返回结果时，像这样添加发送错误状态码：

res.sendStatus(401)

 

再回头运行代码，发送请求，果然 error 拿到了它该有的信息

{
  ...

  "response": {
    "data": "Unauthorized",
    "status": 401,
    "statusText": "Unauthorized",
    "headers": {
      "content-type": "text/plain; charset=utf-8"
    }
  }
}

 

仔细思考了一下，其实客户端本来就不需要关心底层错误。需要处理展示给用户的只有业务逻辑内发生的错误提示，譬如登录验证失败、数据编辑操作失败等等。