如何正确捕获 fetch 请求中的网络错误与 HTTP 错误（如 500）

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 调用逻辑。