React Native 中使用 API：fetch、loading 和错误状态

React Native API 层实用指南：fetch、loading state、error handling、empty state 和 cache 思维。

这篇文章面向 NativePath 学习者和正在规划移动产品的人。重点不是堆关键词，而是把 React Native 学习变成可以验证、可以解释、可以放进项目里的能力。

为什么这个主题重要

用户看不到 fetch call，但会立刻看到混乱的 loading、不清楚的错误或空白页面。所以 React Native 的 API layer 应该被当作 UI 的一部分。一次请求成功不够，慢网络、空结果和重试路径也需要设计。

移动开发学习只有和一个屏幕、一个用户动作、一个可验证的结果连起来，才真正有用。把 scope 控制到可以完成，但又要足够真实，让你学习产品行为，而不只是学习语法。

如何处理这个问题

先从用户路径开始，再选择工具。想清楚 learner 或 customer 第一眼看到什么，需要哪些数据，流程可能在哪里失败。这样可以避免初学者常见的问题：写了很多零散 snippet，却不理解移动应用作为一个完整 flow 如何运行。

选择一个从 server 获取列表的页面。分别实现 loading、success、empty 和 error state。然后测试 refresh 或 retry 后状态是否仍然清楚。

实用拆解

检查清单

• 选择一个小 screen 或 flow;
• 除了正常路径，也测试一个失败场景;
• 把结果连接到作品集项目;
• 如果解释还模糊，就缩小范围重新做一次;

一个实用 checkpoint 是：你能不能用简单语言解释 tradeoff。如果答案依赖一段你不理解的 snippet，就放慢速度，重新做最小版本。如果你改变一个条件后仍能预测结果，说明这个主题开始变得真正实用。

如何在 NativePath 中使用

可以用 /zh/courses 走结构化路线；用 /zh/games 做短练习；需要检验速度和准确率时，再打开 /zh/arena。 记录哪里坏了、你测试了什么、下一版会改进什么。这个习惯会把 tutorial 练习变成 portfolio 证据。

继续学习前

当你能展示一个小的可运行例子，说出一个 edge case，并解释当前 scope 为什么适合这个方案时，就可以继续下一步。现在不需要完美 app。你需要的是清晰的下一步，以及能通过真机检查的结果。

练习路线

不要只记住 fetch 的写法。先做一个小列表页：进入页面时显示 loading，成功后显示数据，失败时显示错误文案，接口返回空数组时显示 empty state。然后再加入刷新按钮和一次简单的 retry。这个练习能暴露真实移动应用里最常见的问题：网络慢、JSON 字段缺失、用户重复点击、页面离开后状态还在更新。

完成后，把 API 代码从 screen 里拆出来，保留清晰的输入和输出。这样你之后换成 React Query、SWR 或自己的 cache layer 时，screen 不需要被重写。

常见错误

不要把所有请求都写在一个巨大的 useEffect 里，也不要让 screen 同时负责 URL、headers、JSON 解析、错误翻译和界面状态。先把 API 调用拆成清晰函数，再让 screen 只关心四种状态：loading、data、empty、error。这样代码更容易测试，也更容易在 portfolio 里解释。

检查结果时，请故意断网、返回空数据、改错字段名，并快速点两次刷新按钮。如果界面仍然清楚，说明这个 API flow 已经接近真实项目要求。