Frontend Academy · 课时

错误处理：HTTP 状态码

Q: 「错误处理：HTTP 状态码」这节课中我会学到什么？

将 HTTP 状态码映射为面向用户的提示信息，区分网络错误和服务器错误，并实现重试逻辑。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将 HTTP 状态码映射为面向用户的提示信息，区分网络错误和服务器错误，并实现重试逻辑。

错误处理：HTTP 状态码 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

HTTP 状态码类别

状态码按首位数字分组：2xx 表示成功，3xx 表示重定向，4xx 表示客户端错误（由您导致），5xx 表示服务器错误（由服务端导致）。

常见的 2xx 状态码

200 OK：成功并返回正文。201 已创建：资源已创建（通常会返回新资源）。204 无内容：成功但没有正文（DELETE，有时也用于 PUT）。

常见的 4xx 状态码

400 错误请求：输入格式错误。401 未授权：缺少身份验证信息或身份验证无效。403 禁止访问：已通过身份验证，但无权执行操作。404 未找到：资源不存在。409 冲突：状态冲突（例如邮箱重复）。422 无法处理的实体：验证失败。

常见的 5xx 状态码

500 内部服务器错误：通用的服务器故障。502 网关错误：上游服务失败。503 服务不可用：服务器过载或已停止运行。504 网关超时：上游服务未能及时响应。

将状态码映射为用户消息

将状态码转换为有用的界面消息——不要向用户显示“错误 500”。

function userMessage(status) {
  if (status === 401) return 'Please sign in to continue.';
  if (status === 403) return "You don't have permission for that.";
  if (status === 404) return 'Not found.';
  if (status === 409) return 'Already exists.';
  if (status === 422) return 'Please check the form for errors.';
  if (status >= 500) return 'Something went wrong. Try again in a moment.';
  return 'Something unexpected happened.';
}

网络错误与服务器错误

获取失败（设备离线、DNS 失败或 CORS 错误）与服务器返回错误响应是两回事。网络错误会抛出异常；服务器错误会返回状态码 >= 400 的 Response。

try {
  const res = await fetch('/api/users');
  if (!res.ok) {
    // Server replied but with error status
    throw new Error(`Server error ${res.status}`);
  }
  return res.json();
} catch (err) {
  if (err instanceof TypeError) {
    // Network failure — fetch couldn't reach server
    throw new Error('Network error. Check your connection.');
  }
  throw err;
}

针对 5xx 和网络错误的重试逻辑

服务器错误和网络故障通常是暂时性的。请使用指数退避进行重试。

async function fetchWithRetry(url, options, maxRetries = 3) {
  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {
      const res = await fetch(url, options);
      if (res.ok || (res.status >= 400 && res.status < 500)) return res;
      // 5xx — retryable
    } catch (err) {
      if (attempt === maxRetries - 1) throw err;
    }
    await new Promise(r => setTimeout(r, 2 ** attempt * 1000)); // 1s, 2s, 4s
  }
}

不要重试 4xx

4xx 错误是由您导致的，重试也不会有帮助。只重试 5xx 错误和网络故障。429（请求过多）是例外，因为它通常会包含 Retry-After 标头。

读取 Retry-After 标头

服务器可能会在 429 和 503 响应中包含 Retry-After，请等待指定的秒数后再重试。

const res = await fetch('/api/limited');
if (res.status === 429) {
  const after = parseInt(res.headers.get('Retry-After') || '5', 10);
  await new Promise(r => setTimeout(r, after * 1000));
  return fetch('/api/limited');
}

展示验证错误

422 响应通常会包含一个列出字段错误的 JSON 正文。请将这些错误显示在相关表单输入旁边。

// Server response for 422:
// { errors: { email: 'Already taken', password: 'Too short' } }

if (res.status === 422) {
  const { errors } = await res.json();
  Object.entries(errors).forEach(([field, msg]) => {
    setFieldError(field, msg);
  });
}

遥测：将错误记录到服务

将错误发送到 Sentry、Datadog 或 LogRocket，以便在生产环境中查看。请包含请求 URL、方法、状态码和经过清理的正文（不要包含机密信息）。

提供可执行的恢复操作

每个错误界面都应该为用户提供继续操作的方式：重试按钮、指向支持页面的链接，或返回可正常工作的页面。没有出路的错误页面会让用户感到沮丧。

快速检查

某个 API 返回 422 无法处理的实体。这通常意味着什么？

回顾：HTTP 错误处理

2xx 表示成功，3xx 表示重定向，4xx 表示客户端错误，5xx 表示服务器错误。将状态码映射为用户易懂的消息。区分网络错误（fetch 抛出的 TypeError）和服务器错误（res.ok 为 false）。使用指数退避重试 5xx 错误和网络故障；绝不要重试 4xx（带有 Retry-After 的 429 除外）。展示 422 的字段错误。将错误记录到 Sentry 等服务中。

常见问题解答

「错误处理：HTTP 状态码」课时是免费的吗？

是的 — 「错误处理：HTTP 状态码」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「错误处理：HTTP 状态码」这节课中我会学到什么？

将 HTTP 状态码映射为面向用户的提示信息，区分网络错误和服务器错误，并实现重试逻辑。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「错误处理：HTTP 状态码」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy