如何在 React 中正确捕获并显示 Fetch 请求返回的 400 错误详情

当 react 使用 fetch 调用 api 遇到 400 响应时，需主动解析响应体（如 json）才能获取 `errordesc` 等自定义错误字段，而非仅依赖 `statustext`。

在 React 应用中，fetch 默认不会因 HTTP 错误状态（如 400、500）抛出异常，而是将 response.ok 设为 false。此时若直接调用 Promise.reject(response.statusText)，会丢失响应体中的结构化错误信息（如 errorDesc），导致无法向用户展示精准的业务错误提示。

要正确提取后端返回的错误详情，关键在于：对非成功响应，先调用 response.json()（或 response.text()）读取响应体，再基于解析结果渲染 Modal 或抛出定制错误。

以下是推荐的处理方式：

fetch(URL, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' }, // 注意：通常需设置 headers
  body: JSON.stringify(data) // 确保 data 已序列化（如为对象）
})
.then(response => {
  if (!response.ok) {
    // 统一处理错误响应：先解析 JSON，再使用业务字段
    return response.json().then(errorData => {
      const errorMsg = errorData.message || 'Request failed';
      const errorDetail = errorData.errorDesc || '';

      Modal.error({
        className: "ErrorModal",
        title: errorMsg,
        content: errorDetail,
      });

      // 可选：抛出自定义错误便于上层 catch 捕获（如触发状态更新）
      throw new Error(`${errorMsg}: ${errorDetail}`);
    });
  }
  return response.json();
})
.then(data => {
  // 处理成功响应
  console.log('Success:', data);
})
.catch(error => {
  console.error('API call failed:', error);
  // 此处可统一处理网络异常、JSON 解析失败、或上面 throw 的业务错误
});

✅ 关键要点说明：

response.json() 是一个异步操作，必须用 .then() 链式调用，不可在 if (!response.ok) 块内直接 return response.json() 后继续写同步逻辑；
建议为 fetch 显式添加 headers 和序列化 body（尤其当后端期望 JSON）；
使用 errorData?.errorDesc 等可选链访问，增强健壮性，避免因响应格式不一致导致运行时错误；
若错误响应可能不是 JSON（如纯文本或 HTML），可用 response.text() 替代，并手动 JSON.parse()（需包裹 try/catch）；
throw new Error(...) 可让 .catch() 统一处理所有失败路径（包括网络错误、解析失败、业务错误），利于集中日志上报或状态管理。

通过该模式，你不仅能精准展示 "missing required first name field" 这类用户友好的字段级提示，还能保持代码清晰、可维护，并与现代 React 错误边界或状态管理方案良好集成。

# react # html # js # json # app # 后端 # ai # red # if # try # throw # catch # Error # promise # 异步 # http # 抛出 # 自定义 # 可选 # 链式 # 是一个 # 序列化 # 还能 # 设为 # 你不