捕获fetch错误与500错误技巧

文章不知道大家是否熟悉？今天我将给大家介绍《捕获 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 调用逻辑。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~