Promise使用時應註意的問題

最近在使用axios庫時遇到了個問題，後端介面報了500錯誤，但前端並未捕獲到。
1. 調用介面的業務代碼如下：

 1 // 業務代碼調用
 2 axios({
 3     url: url,
 4     method: 'post',
 5     data: data
 6   }).then(res => {
 7     // 提示用戶數據更新成功
 8     // 問題：後端介面明明報了500錯誤，但代碼確運行到了這裡，導致前端界面提示更新成功
 9   }).catch(err => {
10     // 提示用戶更新失敗
11     // 問題：本該運行到這裡捕獲錯誤，結果卻並未捕獲
12   })

很奇怪，代碼未按預期的結果運行。

2. 檢查下axios整體的配置

// 自己封裝的用來過濾http錯誤的方法
function filter500(error, code, errMsg) {
  // 界面提示代碼略
  
  return Promise.reject(new Error(error))
}

// axios整體配置，對響應進行攔截
axios.interceptors.response.use(data => {
  // ui效果代碼略
  return data
}, error => {
  // ui效果代碼略
  const errMsg = error.toString()
  const code = errMsg.substr(errMsg.indexOf('code') + 5)

  if (code === '401') {
    filter401() // 註意這裡並未返回
  } else if (code === '500') {
    filter500(error, code, errMsg) // 註意這裡並未返回
  } else {
    return Promise.reject(new Error(error))
  }
})

在axios整體配置的代碼中，過濾http code時，調用了filter401()、filter500()，但是這裡註意並未將兩個filter函數的結果返回，也就是並未返回promise，這就是導致問題出現的原因，也就是當後端介面報了500錯誤時被axios攔截了但確並未返回一個promise，導致業務代碼中未捕獲此錯誤。所以記住：
**在每個promise鏈條中必須返回promise，否則調用結果可能和你預期不一樣。**

這篇文章最初發表在我自己折騰的博客站點上：Promise使用時應註意的問題，該博客用了一位前輩開源的源碼，基於thinkjs和vuejs開發，歡迎大家來逛逛。