Promise使用時應注意的問題

yangtoude發表於2018-11-18
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開發，歡迎大家來逛逛。

相關文章