fetch 请求即使返回 4xx/5xx 状态码也不会抛出异常，而是正常解析为 Response 对象；只有网络层失败（如 DNS 错误、CORS 被拒）才会触发 catch，此时无响应头可读。关键在于区分「HTTP 错误」与「网络错误」，并始终检查 response.ok 或 response.status。
fetch 请求即使返回 4xx/5xx 状态码也不会抛出异常，而是正常解析为 response 对象；只有网络层失败（如 dns 错误、cors 被拒）才会触发 catch，此时无响应头可读。关键在于区分「http 错误」与「网络错误」，并始终检查 `response.ok` 或 `response.status`。
在 JavaScript 中，fetch() 的错误处理机制常被误解：它不会因 HTTP 状态码异常（如 400、401、500）而拒绝 Promise，仅在网络层面失败（如请求未发出、DNS 解析失败、连接中断、CORS 阻断）时才进入 catch 块。这意味着——只要服务器成功返回了响应（哪怕状态码是错误的），你就能访问 response.headers，包括自定义头如 X-reason。
✅ 正确处理 HTTP 错误（可读取响应头）
当服务端返回 400 Bad Request 并携带 X-reason: "Invalid phone number" 时，fetch 仍会 resolve 一个 Response 对象。你需要显式检查状态：
useEffect(() => {
async function fetchData() {
try {
const res = await fetch("https://api-production.afghantell.com/apiv1/eligibilities");
// 关键：用 response.ok 或 status 判断业务逻辑是否成功
if (!res.ok) {
// ✅ 此时 res.headers 可正常读取！
const reason = res.headers.get("X-reason");
console.log("HTTP Error:", res.status, "Reason:", reason);
// 可选：将响应体转为 JSON 进一步解析错误详情
const errorData = await res.json();
console.error("Backend error payload:", errorData);
throw new Error(`HTTP ${res.status}: ${reason || 'Unknown error'}`);
}
const data = await res.json();
console.log("Success:", data);
} catch (err) {
// ⚠️ 仅捕获网络级错误（如 TypeError、AbortError、AggregateError）
// 此时 res 不存在，headers 不可用
console.error("Network or runtime error:", err);
// 例如：TypeError: fetch failed（DNS 失败）、AbortError（请求被取消）、CORS blocked（浏览器静默拦截）
}
}
fetchData();
}, []);? 提示：res.ok 等价于 res.status >= 200 && res.status
❌ 无法获取响应头的场景（catch 中无 headers）
以下情况 catch 块被触发，但没有 Response 对象，因此 headers 不可访问：
立即学习“Java免费学习笔记（深入）”；
- URL 格式错误（如 fetch('http://')）→ TypeError
- 域名无法解析（如 fetch('https://invalid-domain-12345.com')）→ TypeError with ENOTFOUND
- 跨域请求被浏览器拦截（CORS preflight 失败或响应缺少 Access-Control-Allow-Origin）→ 浏览器控制台报 CORS 错误，但 JS 中仅抛出泛型 TypeError，且无 Response 实例
- 请求被主动中止（如 AbortController 触发）→ AbortError
示例（CORS 场景）：
// 假设该域名未配置 CORS，浏览器会直接阻断
fetch("https://api.example.com/data")
.then(res => console.log("Never reached"))
.catch(err => {
console.log("Caught:", err.name); // "TypeError"
// ❌ 无法访问 res.headers —— res 根本没创建
});? 实用技巧：统一错误处理工具函数
为提升可维护性，可封装一个健壮的 fetch 封装器：
async function safeFetch(input, init = {}) {
try {
const res = await fetch(input, init);
if (!res.ok) {
const headers = Object.fromEntries(res.headers.entries());
const statusText = res.statusText || `HTTP ${res.status}`;
const reason = headers["x-reason"] || headers["x-error-reason"];
const error = new Error(`${statusText}${reason ? ` (${reason})` : ''}`);
error.response = res; // 附带 Response 实例供进一步处理
error.status = res.status;
error.headers = headers;
throw error;
}
return res;
} catch (err) {
// 网络错误：err 是 Error 实例，但无 response 属性
if (!err.response) {
err.type = "network";
err.message = `Network error: ${err.message}`;
} else {
err.type = "http";
}
throw err;
}
}
// 使用示例
useEffect(() => {
safeFetch("https://api-production.afghantell.com/apiv1/eligibilities")
.then(res => res.json())
.then(data => console.log("Data:", data))
.catch(err => {
if (err.type === "http") {
console.log("Server rejected:", err.status, err.headers["x-reason"]);
} else {
console.log("Network issue:", err.message);
}
});
}, []);✅ 总结要点
- ✅ 4xx/5xx 响应 → fetch 不 reject，res.headers 完全可用，务必检查 res.ok；
- ❌ DNS 失败、CORS 拦截、连接超时等 → fetch reject，catch 中无 Response 对象，headers 不可读；
- ? 自定义响应头（如 X-reason）需确保服务端已通过 Access-Control-Expose-Headers 显式暴露（浏览器 CORS 安全限制）；
- ?️ 生产环境建议统一封装 safeFetch，分离 HTTP 错误与网络错误，并透传响应元数据；
- ? 浏览器与 Node.js 的 fetch 行为基本一致，但错误类型细节略有差异（如 Node.js 报 TypeError: fetch failed，浏览器可能更具体）。
掌握这一机制，你就能精准捕获后端返回的诊断信息（如 X-reason），大幅提升前端错误排查与用户体验优化能力。
