JavaScript fetch 遇到 404 为什么不进入 catch

JavaScript 的 fetch() 遇到 404 不进入 catch，通常不是异常处理失效，而是请求已经完成了 HTTP 层通信。只要浏览器拿到了服务器返回的响应，fetch 就会把一个 Response 交给 Promise；404 只是这个响应的状态不成功。处理方式是在 then 或 await 后检查 response.ok、response.status，需要时再主动抛出错误。

为什么 404 会继续走 then

fetch 的 Promise 关注的是“请求是否拿到了响应”，不是“这个响应是否符合业务预期”。服务器返回 404 时，连接、请求和响应过程仍然可能是完整的，所以 Promise 会兑现为 Response。MDN 对这一点有明确说明：HTTP 状态表示错误时，Promise 仍不会自动拒绝。

因此下面的代码会打印出 404，而不会打印“请求失败”：then 接收到的是一个合法的响应对象。

fetch('/api/profile')
  .then((response) => {
    // 这里只说明响应已经到达，不代表业务请求成功
    console.log(response.status);
  })
  .catch((error) => {
    // 网络错误、无效 URL 或中止请求更可能进入这里
    console.error('请求没有得到可用响应', error);
  });

用 response.ok 和 response.status 判断 HTTP 结果

response.ok 是快速判断：状态码在 200 到 299 之间时为 true，404、500 等状态为 false。如果页面需要针对 404 显示“资源不存在”，就直接读取 status，不要把所有非 2xx 都混成一个网络错误。

如果业务层希望让 404 也进入统一错误分支，可以在判断后主动抛出错误：

async function loadProfile() {
  try {
    const response = await fetch('/api/profile');

    // 先判断 HTTP 状态，再读取响应体，避免把错误页当 JSON 解析
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error('个人资料不存在');
      }
      throw new Error(`接口返回 HTTP ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    // 这里既能接住主动抛出的业务错误，也能接住网络异常
    console.error('加载资料失败', error);
    throw error;
  }
}

把 HTTP 错误和网络异常分开处理

HTTP 错误说明服务器或网关给出了一个状态；网络异常则可能是 DNS、连接、权限策略或浏览器安全检查没有让请求得到可供脚本使用的响应。两者的用户提示和重试策略往往不同：404 不适合盲目重试，临时网络失败才可能适合重试。

还要注意跨域场景。请求可能在开发者工具里看到失败，但脚本拿不到可读取的响应，这时不要简单把它当成 404；先检查请求地址、CORS 响应头和页面的 Content Security Policy。主动取消请求时则应识别 AbortError，避免把用户离开页面造成的取消误报成服务器故障。

常见问题

response.ok 能判断 404 吗？

能。404 时它是 false，但不能仅靠它区分 404 和 500；需要具体分支时读取 response.status。

把 fetch 包在 try/catch 里为什么仍然没有捕获 404？

因为 try/catch 只会捕获被拒绝的 Promise 或同步抛出的错误。要让 404 进入 catch，先检查 ok，再手动 throw。

读取 response.json() 也会失败吗？

会。错误页可能返回 HTML 或空内容，所以应在确认 HTTP 状态后再解析 JSON；解析失败仍然要保留原始错误上下文。

记住一个边界即可：fetch 负责告诉你响应有没有到达，response.ok/status 负责告诉业务这次 HTTP 结果是否可接受。把这两层分开，404 不进 catch 就不再是令人困惑的现象。