POST方法fetch请求失败时React如何获取Express返回的实际错误而非500状态

问题原因 #

你遇到的问题由两个常见误区导致：

1. fetch API 设计规则是仅网络异常、请求无法发出时才会进入catch回调，只要服务端返回了响应（哪怕是4xx、5xx状态码），都会默认走then回调，不会自动抛出错误
2. Express 侧直接send(error)时，如果error是标准Error实例，直接发送会丢失错误的可序列化属性，前端无法正常解析

第一步：修改Express接口代码 #

将错误信息以JSON格式返回，确保信息可被前端正常解析：

app.post('/updatedb', (req, res) => {
    dbUpdateMethod(req.body)
    .then(response => {
        res.status(200).json(response);
    })
    .catch(error => {
        console.log("The actual error", error)
        // 改为返回JSON结构的错误信息，可自定义字段方便前端处理
        res.status(500).json({
          errorMsg: error.message || '数据库更新操作失败',
          errorDetail: error
        });
    })
})

第二步：修改React fetch请求代码 #

需要先判断响应状态，异常时主动抛出错误，同时正确处理异步的response.json()：

写法1：Promise链写法（兼容原有代码风格） #

fetch('http://expressurl:5000/updatedb', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({ dataToBeupdatedInDb }),
})
.then(response => {
    // 先判断响应状态是否为2xx
    if (!response.ok) {
      // 状态异常时先解析JSON错误信息，再抛出
      return response.json().then(errorInfo => Promise.reject(errorInfo))
    }
    // 正常响应解析JSON
    return response.json()
})
.then(successData => {
    console.log("请求成功，返回数据：", successData)
})
.catch(error => {
    // 服务端返回的500错误信息会走到这里
    console.log("获取到服务端错误信息：", error)
});

写法2：async/await 写法（可读性更高） #

const updateDb = async () => {
  try {
    const response = await fetch('http://expressurl:5000/updatedb', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ dataToBeupdatedInDb }),
    })
    const data = await response.json()
    if (!response.ok) {
      // 抛出服务端返回的错误信息
      throw data
    }
    console.log("请求成功，返回数据：", data)
  } catch (error) {
    console.log("获取到服务端错误信息：", error)
  }
}

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