在Express中如何主动抛出错误使客户端Axios请求进入catch回调

核心原理 #

axios默认的响应校验规则为：仅当HTTP响应状态码处于2xx区间时，Promise才会进入then分支，只要状态码不在该范围就会触发catch回调。

Express服务端实现方式 #

你只需要在返回响应前，先设置非2xx的状态码即可，最常用的是4xx类客户端错误码（参数错误、权限不足等）、5xx类服务端错误码：

// Express服务端代码示例
app.post('/edit-item', (req, res) => {
  const { _id, updateText, author } = req.body
  // 举个校验失败的场景：修改内容为空
  if (!updateText?.trim()) {
    // 设置400错误状态码后再返回错误信息，即可触发客户端axios的catch
    return res.status(400).json({ error: '修改内容不能为空' })
  }
  // 正常业务逻辑走完返回2xx响应，进入then分支
  res.json('修改成功')
})

特殊场景扩展：2xx状态码也触发catch #

如果你有特殊业务需求，希望就算返回2xx状态码，也能根据业务字段判断是否进入catch，可以在客户端自定义axios的validateStatus校验规则：

axios.post('/edit-item', {
  _id: id, 
  updateText: editInput.value, 
  author: author
}, {
  // 自定义校验规则：仅状态码<300且业务字段success为true时才进入then
  validateStatus: (status, response) => {
    return status < 300 && response.data.success === true
  }
}).then((response) => {
  e.target.parentElement.parentElement.children[3].innerHTML = `${response.data}`
}).catch((err) => {
  // 可从err.response中拿到服务端返回的错误信息
  console.log(err.response?.data?.error || '请求处理失败')
})

内容的提问来源于stack exchange，提问作者Justin Christopher Domingo