前端 fetch 收到 404 为什么不会自动进入 catch

前端用 fetch() 请求一个不存在的接口，Network 面板显示 404，但代码却没有进入 catch，这是正常行为。fetch 关注的是“请求有没有拿到响应”，而不是“业务状态码是不是成功”：只要服务器返回了 HTTP 响应，Promise 通常就会交付一个 Response 对象，404、500 也在其中。真正的处理方式是先检查 response.ok 或 response.status，再决定是否主动抛出错误。

为什么 404 会落到 then 而不是 catch

fetch() 返回的是一个 Promise。它在服务器返回响应头后就可以 resolve 为 Response，即使状态码表示资源不存在。catch 处理的是请求本身没有完成的情况，例如 URL 无效、网络断开、请求被中止，或浏览器把请求判定为网络错误。

因此下面的代码会打印响应状态，而不是直接跳到 catch：

fetch("/api/profile")
  .then((response) => {
    // 404 仍然是 Response，这里可以读取状态码
    console.log(response.status);
    return response.json();
  })
  .catch((error) => {
    // 这里处理网络失败、无效 URL 或被中止的请求
    console.error("请求没有完成", error);
  });

用 Response.ok 和 status 建立判断边界

Response.ok 是一个布尔值，状态码位于 200 到 299 时为 true，否则为 false。需要区分“未登录”“资源不存在”“服务端异常”时，使用 status 更具体；只想判断能否按成功响应继续解析时，使用 ok 更简洁。

把 HTTP 失败转换为可捕获错误

如果页面统一用一个错误出口展示失败提示，可以把非 2xx 响应转换成异常。关键点是先判断状态，再读取 JSON；否则后端返回 HTML 错误页时，response.json() 还可能产生另一种解析异常，排查起来更绕。

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

    // HTTP 失败先转成异常，避免错误数据继续向下流动
    if (!response.ok) {
      throw new Error(`接口返回 ${response.status}`);
    }

    // 只有通过状态判断后才解析成功响应体
    return await response.json();
  } catch (error) {
    // 网络异常和主动抛出的 HTTP 异常都从这里收口
    console.error("加载资料失败", error);
    return null;
  }
}

若产品需要更细的提示，可以先判断 response.status === 404，给出“资源不存在”；对 401 跳转登录；对 500 显示稍后重试。这里的选择属于业务策略，fetch 不会替应用决定哪些 HTTP 状态应该抛错。

排查 fetch 错误时先分清哪一层

看到“没有进入 catch”时，先记录三个事实：请求是否拿到了 Response、response.status 是多少、response.ok 是否为真。拿到 404 的 Response 说明网络链路和服务器响应阶段已经完成，接下来应检查 URL、路由和业务分支；只有根本拿不到 Response，才优先检查网络、CORS、CSP、无效 URL或取消信号。

MDN 对 fetch() 的说明也明确区分了这两类情况：HTTP 错误状态不会让 Promise 自动 reject，调用方应检查 Response.ok 或 Response.status。把这一层边界写进请求封装，页面组件就不必重复猜测错误来源。

相关问题

fetch 收到 500 会自动进入 catch 吗？

不会。只要服务器给出了 HTTP 响应，Promise 通常仍然 resolve；需要用 !response.ok 或具体状态码主动抛错。

response.ok 为 false 时还能读取响应体吗？

可以。它只表示状态不在 200–299 范围，响应体仍可能包含错误码、提示或重试信息，是否读取由业务决定。

网络错误和 404 应该用同一条提示吗？

通常不应该。404 多半需要检查资源路径或业务条件，网络错误则更适合提示连接失败并提供重试；统一捕获不等于统一文案。

参考：MDN Window.fetch()、MDN Response.ok、MDN Response.status。