当 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 错误边界或状态管理方案良好集成。
