Frontend Academy · 课时

处理加载状态与错误状态

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

为组件添加加载和错误状态变量，获取数据时显示加载指示器，并在失败时显示友好的错误消息。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

为组件添加加载和错误状态变量，获取数据时显示加载指示器，并在失败时显示友好的错误消息。

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

异步数据的三种状态

任何异步数据操作都有三种状态：加载中（请求正在进行）、成功（已收到数据）、错误（请求失败）。您的界面应明确处理这三种状态。

加载界面

加载期间，请显示旋转指示器、骨架屏或占位符。加载时请禁用按钮，以防止表单重复提交。用户应始终知道应用正在运行。

if (loading) {
  return (
    <div className="loading-state">
      <Spinner size="lg" />
      <p>Loading users...</p>
    </div>
  );
}

错误界面

请求失败时，请显示友好的错误消息。加入重试操作，以免用户陷入错误状态。为开发人员记录完整的错误信息。

if (error) {
  return (
    <div className="error-state">
      <p>Failed to load data: {error}</p>
      <button onClick={() => setRetry(n => n + 1)}>Try Again</button>
    </div>
  );
}

重试机制

在状态中递增重试计数器，并将其添加到副作用的依赖数组中。当用户点击“重试”时，计数器会发生变化，从而再次触发副作用。

const [retry, setRetry] = useState(0);

useEffect(() => {
  // fetch...
}, [userId, retry]); // retry in deps triggers re-fetch

<button onClick={() => setRetry(n => n + 1)}>Retry</button>

加载状态最佳实践

1）请求开始时立即显示加载状态。2）尽量减少加载状态——如果有缓存数据可用，就不要重新设置加载状态。3）对于分页，请区分首次加载和加载更多。4）对于少于 100 毫秒的加载，不要闪现旋转指示器——请添加延迟，或保持显示之前的数据。

乐观更新

乐观更新是指在服务器确认之前立即更新界面，如果请求失败再回滚。这样可以让用户感觉应用响应即时。

// Optimistic:
const prevItems = items;
setItems(items.filter(i => i.id !== id)); // immediate UI update
try {
  await deleteItem(id);
} catch (err) {
  setItems(prevItems); // revert on failure
  showError('Delete failed. Changes reverted.');
}

用于处理渲染错误的错误边界

请使用错误边界（包含 componentDidCatch 的类组件）捕获渲染期间抛出的错误。它们会显示备用界面，而不是导致整个应用崩溃。

HTTP 错误映射

将 HTTP 状态码映射为用户易懂的消息。401 → 重定向到登录页。403 → 显示“拒绝访问”。404 → “未找到”。429 → “请求过多，请稍候”。500+ → “服务器错误，请重试”。

function mapStatusToMessage(status: number): string {
  if (status === 401) return 'Please sign in to continue';
  if (status === 403) return 'You don\'t have permission to do this';
  if (status === 404) return 'This item no longer exists';
  if (status === 429) return 'Too many requests. Please wait a moment';
  if (status >= 500) return 'Server error. We\'re looking into it';
  return 'Something went wrong';
}

使用 useReducer 管理复杂的获取状态

当加载、错误和数据彼此交互时（例如重新加载时清除错误），使用 reducer 比多次调用 useState 更清晰。

type FetchState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; message: string };

const [state, dispatch] = useReducer(fetchReducer, { status: 'idle' });

Suspense——未来方向

React Suspense 配合数据获取框架（React Query、Relay、Next.js）可以让组件在等待数据时“暂停”。父级 Suspense 边界会自动显示备用界面。这是 React 的发展方向。

网络错误与服务器错误

网络错误（无连接、CORS）会在捕获块中抛出。服务器错误（4xx、5xx）会正常完成——您必须检查 res.ok 才能检测到它们。错误处理必须同时应对这两类错误。

快速检查

什么是“乐观更新”？

回顾：加载与错误状态

始终处理加载、成功和错误状态。显示有意义的加载界面。将 HTTP 错误映射为用户易懂的消息。实现重试机制。使用乐观更新提供即时的感知反馈。使用 useReducer 协调获取状态。Suspense 最终会进一步简化这种模式。

常见问题解答

「处理加载状态与错误状态」课时是免费的吗？

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

「处理加载状态与错误状态」这节课中我会学到什么？

为组件添加加载和错误状态变量，获取数据时显示加载指示器，并在失败时显示友好的错误消息。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「处理加载状态与错误状态」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Frontend Academy