fetch 返回 promise，网络异常（如断网）会触发 `catch`，但 http 状态码错误（如 500、404）仍返回 `response` 对象，需手动检查 `response.ok` 或 `response.status`；直接用 `.then().catch()` 无法捕获网络失败，而 `try/catch` 配合 `await` 才能统一处理异步错误流。
fetch 的行为常被误解：它仅在网络请求完全失败时（如 DNS 解析失败、连接中断、CORS 拒绝）才 reject Promise；而服务器返回 500、404、401 等 HTTP 错误状态码时，fetch 仍会 resolve，并返回一个 Response 实例——此时 response.ok 为 false，response.status 为对应状态码（如 500），但你不会进入 Promise 的 rejection 分支。
因此，以下写法是错误的预期：
fetch('/api/data', { method: 'POST', body })
.then(res => {
// ❌ 这里 res.status 可能是 500，但代码仍会执行到这里！
console.log(res.status); // 500
})
.catch(err => {
// ✅ 仅触发于网络级失败（如 TypeError: Failed to fetch）
console.error('Network error:', err);
});✅ 正确做法：始终检查 response.ok 或显式判断 response.status >= 400，并将逻辑组织为 async/await 结构，便于统一错误处理：
async function callApi(url, options = {}) {
try {
const response = await fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
...options,
});
// ✅ 检查 HTTP 状态码是否成功（200–299）
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status} ${response.statusText}`);
}
return await response.json(); // 或 response.text(), response.blob() 等
} catch (err) {
// ? err 是网络异常（如 TypeError）或我们手动抛出的 HTTP 错误
console.error('Request failed:', err.message);
// 可根据 err.name 或 err.message 类型做精细化处理
if (err.name === 'TypeError' && err.message.includes('fetch')) {
throw new NetworkError('Network unavailable or CORS blocked');
}
throw err; // 重新抛出，交由上层处理
}
}
// 使用示例
callApi('/api/submit', { body: JSON.stringify({ data: 1 }) })
.then(data => console.log('Success:', data))
.catch(err => alert(`Failed: ${err.message}`));⚠️ 注意事项：
- 不要依赖 .catch() 捕获 500 错误——它只捕获 Promise rejection（即网络失败），不捕获业务级 HTTP 错误；
- response.status 和 response.statusText 仅在 response 实例存在时可读，因此必须先确保 fetch 成功 resolve（即未进入 catch）；
- 若需在 then 链中处理，也可用 .then(res => res.ok ? res.json() : Promise.reject(new Error(...)))，但 async/await 更清晰易维护；
- 对于 TypeScript 项目，建议封装为返回 Promise
> 的泛型函数，并联合类型区分 success | error 状态。
总结：fetch 的设计哲学是「网络层与应用层分离」——它把连接可靠性交给 Promise 机制，把语义化错误（如 500）留给开发者判断。掌握这一原则，才能写出健壮、可调试的前端 API 调用逻辑。
