Promise使用時應注意的問題

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

// 業務代碼調用
axios({
    url: url,
    method: 'post',
    data: data
  }).then(res => {
    // 提示用戶數據更新成功
    // 問題：后端接口明明報了500錯誤，但代碼確運行到了這里，導致前端界面提示更新成功
  }).catch(err => {
    // 提示用戶更新失敗
    // 問題：本該運行到這里捕獲錯誤，結果卻並未捕獲
  })

 

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

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開發，歡迎大家來逛逛。