当 fetch 返回 500 等非 2xx 状态码时，response.ok 为 false，但响应体仍可读；需在 .catch() 中判断 error 是否为 Response 实例，并调用 .json() 或 .text() 解析其内容，才能获取如 "message" 这类自定义错误字段。
当 fetch 返回 500 等非 2xx 状态码时，`response.ok` 为 false，但响应体仍可读；需在 `.catch()` 中判断 `error` 是否为 `response` 实例，并调用 `.json()` 或 `.text()` 解析其内容，才能获取如 `"message"` 这类自定义错误字段。
在使用 fetch 发起 API 请求时，一个常见误区是认为「非 2xx 响应会自动抛出异常」——实际上，fetch 仅在网络失败（如 DNS 错误、连接中断）时才拒绝 Promise；HTTP 错误状态（如 400、500）仍会进入 .then() 的 response 分支，需开发者主动判断并处理。
要正确读取 500 响应中的 JSON 错误体（例如 { "error": true, "message": "Test error", "data": null }），关键在于：在 .catch() 中识别被 Promise.reject(response) 抛出的 Response 对象，并链式调用 .json() 解析其 body。以下是两种推荐实现方式：
✅ 方案一：传统 Promise 链（兼容性好）
fetch('https://your-api-endpoint', {
headers: { 'Accept': 'application/json' }
})
.then(response => {
if (!response.ok) {
// 主动拒绝，将 Response 实例传入 catch
return Promise.reject(response);
}
return response.json();
})
.then(data => {
console.log('Success:', data);
})
.catch(error => {
if (error instanceof Response) {
// 此处 error 就是被 reject 的 Response 对象
error.json()
.then(errData => {
console.error('API Error:', errData.message || 'Unknown error');
// ✅ 可安全访问 errData.message、errData.error 等字段
})
.catch(parseErr => {
console.error('Failed to parse error response:', parseErr);
});
} else {
console.error('Network or other error:', error);
}
});✅ 方案二：现代 async/await（更清晰、易维护）
async function callApi() {
try {
const res = await fetch('https://your-api-endpoint', {
headers: { 'Accept': 'application/json' }
});
const data = await res.json(); // 先解析 JSON，再判断状态
if (!res.ok) {
// 构造带上下文的错误对象，便于统一处理
const err = new Error(`Request failed: ${res.status} ${res.statusText}`);
err.status = res.status;
err.data = data; // ✅ 包含原始错误响应
throw err;
}
return data;
} catch (err) {
if (err.data && typeof err.data === 'object') {
console.error('Error message:', err.data.message);
console.error('Full error payload:', err.data);
// 可在此处触发 UI 提示、日志上报等
} else {
console.error('Network or parsing error:', err);
}
}
}
// 调用示例
callApi();⚠️ 注意事项
-
始终设置
Accept: 'application/json'头：确保服务端返回 JSON，避免.json()解析失败。 -
.json()是异步操作，必须await或.then()：不可直接error.json().message。 -
错误响应体可能非 JSON：生产环境建议加
.catch()捕获解析失败（如服务端返回 HTML 错误页）。 -
不要忽略
response.status：即使解析成功，也应结合res.status判断业务逻辑（如 401 需跳转登录）。
通过以上方式，你不仅能可靠提取 "message" 字段用于用户提示，还能结构化地管理各类 HTTP 错误，大幅提升前端健壮性与可维护性。
