使用Fetch API时如何获取易读的错误响应对象

首先要明确：Fetch API只有在网络层面出错时才会触发catch，像400、422这类业务错误（无效数据导致的）会正常进入then回调，但此时response.ok会是false。你之前看不到详细错误，是因为没处理这类非成功响应的解析。

修改后的代码可以这样写：

fetch("/inquiries", {
  method: "POST",
  headers: {
    "Accept": "application/json",
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data),
})
.then(response => {
  // 先判断响应是否业务成功（状态码200-299）
  if (!response.ok) {
    // 解析错误响应的JSON内容
    return response.json().then(errData => {
      // 抛出包含详细错误的对象，让catch捕获
      throw errData;
    });
  }
  // 成功时的正常处理
  return response.json();
})
.then(result => {
  // 处理成功响应
  console.log("提交成功", result);
})
.catch(error => {
  // 这里就能拿到REST客户端里看到的详细错误信息了
  console.log("详细错误:", error);
});

关键步骤说明： #

• 检查response.ok：这是Fetch判断请求是否业务成功的核心依据，状态码不在200-299区间时，response.ok为false。
• 解析错误响应：调用response.json()（如果后端返回JSON格式错误）来读取响应体内容，网络标签里的响应数据需要手动解析才能拿到。
• 抛出错误：把解析后的错误数据抛出，让catch回调捕获，这样就能在控制台直接查看清晰的错误详情。

如果后端返回的错误是文本格式，只需把response.json()换成response.text()即可。

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