当 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 或抛出定制错误。
以下是推荐的处理方式：
React 组件生成器
下载
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
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 错误边界或状态管理方案良好集成。
