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"
    }
  }
}

 

仔細思考了一下，其實客戶端本來就不需要關心底層錯誤。需要處理展示給用戶的只有業務邏輯內發生的錯誤提示，譬如登錄驗證失敗、數據編輯操作失敗等等。