当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript fetch 遇到 404 为什么不进入 catch

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

来源：17golang原创 2026-09-06 05:41:15 0浏览收藏

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

要点速览

404、500 等 HTTP 状态不等于网络层失败，fetch 不会因此自动 reject。
response.ok 只在状态码为 200–299 时为 true，精确判断可使用 response.status。
网络断开、URL 无效、CORS 阻止或请求被 abort，才更接近 catch 处理的范围。

为什么 404 会继续走 then

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

JavaScript fetch 从 Response 分流到 HTTP 200 与 HTTP 404 并通过 ok 和 status 判断的静态关系图 — 图1：fetch 先交付 Response，HTTP 404 需要由 response.ok 或 response.status 继续判断。

因此下面的代码会打印出 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 都混成一个网络错误。

结果	Promise状态	代码判断	适合的处理
200–299	fulfilled	`response.ok === true`	读取正常响应体
404	fulfilled	`response.status === 404`	提示资源不存在或走空状态
网络失败	rejected	进入 `catch`	提示重试、检查网络或记录诊断信息

如果业务层希望让 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;
  }
}