在Next.js中使用axios调用Express接口时错误无法被catch捕获如何解决

问题根因 #

axios 默认的响应校验规则为：仅当接口返回200~299区间的HTTP状态码时，才判定请求成功，执行.then()回调；其余状态码会触发.catch()回调。
你当前的Express代码在登录出错时，仍然使用默认的200状态码返回错误信息，所以axios会判定请求成功，进入.then()逻辑而非.catch()。

解决方案 #

方案1：修改后端返回逻辑（推荐，符合HTTP协议规范） #

登录失败属于未授权场景，应该返回401状态码，修改Express接口的错误处理分支：

// Express用户登录接口错误分支修改
if (error) {
  // 先设置401状态码，再返回错误信息
  res.status(401).send({ error })
  return
}

修改后登录失败时接口返回401状态码，会自动触发axios的.catch()回调。

方案2：前端兼容处理（无需修改后端） #

如果暂时无法调整后端代码，可以在前端.then()逻辑开头主动判断错误，抛出异常触发.catch()：

.then((result) => {
  // 新增错误判断
  if (result.data.error) {
    throw new Error(result.data.error)
  }
  sessionStorage.setItem('token', result.data.token);
  axios.defaults.headers.common['Authorization'] = "Bearer " + result.data.token;
  console.log('user signed in');
})

内容的提问来源于stack exchange，提问作者plorp