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，否则调用结果可能和你预期不一样。**  

来源：https://www.cnblogs.com/yangtoude/p/promise-chain.html

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_1367