JavaScript Academy · 课时

处理错误和状态码

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

检查 response.ok 并处理失败情况。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

检查 response.ok 并处理失败情况。

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

请求不会因 HTTP 错误而拒绝

有一个容易忽略的问题：fetch 只会在网络故障时拒绝。即使收到 404 或 500 响应，请求仍会成功完成。您必须自行检查状态。

检查 response.ok

只有状态码处于 200-299 范围内时，response.ok 才是 true。请使用它来检测 HTTP 错误。

const response = await fetch(url);
if (!response.ok) {
  console.log("HTTP error:", response.status);
}

读取状态码

response.status 提供数值状态码，response.statusText 提供简短消息。请根据这些值进行分支处理，以应对特定情况。

if (response.status === 404) console.log("Not found");
if (response.status === 401) console.log("Unauthorized");

针对错误状态抛出异常

一种简洁的模式是：当响应状态不正常时抛出错误，这样单个 catch 就能处理网络故障和 HTTP 故障。

if (!response.ok) {
  throw new Error("Request failed: " + response.status);
}

使用 try/catch 包装

使用异步/等待语法时，请将整个流程放在 try/catch 中。网络错误会使承诺对象拒绝并进入 catch；您抛出的 HTTP 错误也会如此。

try {
  const res = await fetch(url);
  if (!res.ok) throw new Error("Status " + res.status);
  const data = await res.json();
} catch (err) {
  console.log("Failed:", err.message);
}

区分错误类型

请求被拒绝通常意味着无法连接到服务器、DNS 解析失败，或请求被 CORS 阻止。非正常响应意味着服务器已经作出响应，但返回了错误。必要时请分别处理这两种情况。

读取错误响应体

接口通常会返回描述错误的 JSON。请在抛出错误前读取它，以便显示有用的消息。

if (!res.ok) {
  const errBody = await res.json().catch(() => ({}));
  throw new Error(errBody.message || ("Status " + res.status));
}

常见状态码

请了解这些类别：2xx 表示成功，3xx 表示重定向，4xx 表示客户端错误（您发送的内容有误），5xx 表示服务器错误（问题出在对方）。请求会自动跟随大多数重定向。

可复用的辅助函数

将检查逻辑集中到一个辅助函数中，让每个调用位置都获得一致的错误处理。

async function getJSON(url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error("HTTP " + res.status);
  return res.json();
}

重试临时故障

对于不稳定的网络，您可以在遇到 5xx 或网络错误时重试。请限制重试次数，并加入延迟，以免不断向服务器发送请求。

for (let i = 0; i < 3; i++) {
  try { return await getJSON(url); }
  catch (e) { if (i === 2) throw e; }
}

向用户显示错误

请在用户界面层捕获错误，显示友好的消息，而不是让屏幕一片空白。不要让未处理的拒绝悄悄吞掉失败的请求。

getJSON(url)
  .then(render)
  .catch(() => showToast("Could not load data"));

快速检查

请求的错误处理。

回顾

请求只会在网络故障时拒绝，因此请始终检查 response.ok/response.status，并在状态不正常时抛出错误。将调用放在 try/catch 中，读取错误响应体以获取消息，将检查逻辑集中到辅助函数中，并在用户界面中显示友好的错误提示。

常见问题解答

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

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

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

检查 response.ok 并处理失败情况。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

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

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy