Data Fetching

本指南聚焦“拿到数据并稳定展示”，不绑定某个具体库，而是给出选择与组合的框架。

TL;DR
  • 先明确：数据来自哪里（客户端/服务端）、何时获取（进入页/交互后）、是否需要缓存。
  • 优先用“框架/平台”能力（例如路由级数据加载、服务端渲染）减少自建成本。
  • 在 UI 层处理三态：loading/error/success，并避免重复请求与竞态。

问题定义

数据获取通常不是“发一次请求”这么简单，而是包含缓存、一致性、并发、错误重试与用户体验。

推荐做法

  • 把数据获取放在最接近“数据边界”的位置（路由/服务端/集中层），UI 只消费结果。
  • 为请求建立统一的“键”（key），让缓存、失效与预取可控。
  • 把错误可视化，并给用户可操作的恢复路径（重试/回退）。

常见坑

  • 在 Effect 里直接写请求却没处理取消/竞态，导致旧请求覆盖新状态。
  • 把“缓存”当成“状态”，导致到处重复 fetch、难以统一失效策略。

延伸阅读

这篇文章有帮助吗？