陌上人如玉
公子世无双

07-数据请求与异步

React 数据请求与异步:fetch/axios 封装、请求竞态、加载与错误态、缓存重试、乐观更新、分页与无限滚动、轮询,以及 GraphQL、Apollo 与 tRPC 实践。
7.9 上传进度与请求取消-陌上寒

7.9 上传进度与请求取消

fetch 没有原生上传进度(要用 XMLHttpRequest 或手动消费 ReadableStream),取消请求用 AbortController(XHR 用 xhr.abort());大文件要分片上传(并发 + 断点续传 + 秒传)。

赞(0)陌上寒陌上寒阅读()去评论
7.8 轮询与实时数据-陌上寒

7.8 轮询与实时数据

实时数据有四种方案——轮询(简单但浪费)、SSE(服务端单向推送,浏览器自动重连)、WebSocket(双向、需要自己做心跳与重连)、长轮询(兼容性最好但服务器压力大);选择依据是「是否需要双向 + 实时性要求 + 基础设施成本」。

赞(0)陌上寒陌上寒阅读()去评论
7.7 分页与无限滚动-陌上寒

7.7 分页与无限滚动

分页有「页码分页」与「游标分页(cursor)」两类;列表页用 useInfiniteQuery + IntersectionObserver 做无限滚动最省事,而返回列表时恢复滚动位置是体验的关键细节。

赞(0)陌上寒陌上寒阅读()去评论
7.6 乐观更新-陌上寒

7.6 乐观更新

乐观更新是「在请求返回之前先假设它会成功、立刻更新界面」,失败时再回滚——它显著提升「操作手感」,但只适合「大概率成功、可回滚」的操作。

赞(0)陌上寒陌上寒阅读()去评论
7.5 缓存、失效与重试-陌上寒

7.5 缓存、失效与重试

缓存的核心是「这份数据什么时候算新鲜、什么时候该重新拉、没人用的时候什么时候回收」——对应 staleTime(新鲜期)、失效(invalidateQueries)与 gcTime(回收时间);重试则要「只重试值得重试的错误」。

赞(0)陌上寒陌上寒阅读()去评论
7.4 服务端状态管理-陌上寒

7.4 服务端状态管理

服务端状态是「别人拥有的数据的本地快照」,它需要「缓存、去重、失效、重试、重新验证」——这些用 useEffect 手写会写出一堆样板,所以应该交给 TanStack Query / SWR。

赞(0)陌上寒陌上寒阅读()去评论
7.3 加载态与错误态设计-陌上寒

7.3 加载态与错误态设计

异步 UI 有四种状态(idle / loading / success / error,通常还加 empty)——用状态机建模(而不是多个布尔值),并为每种状态设计明确、不闪烁的 UI。

赞(0)陌上寒陌上寒阅读()去评论
7.2 useEffect 中请求的竞态-陌上寒

7.2 useEffect 中请求的竞态

竞态(race condition)指「多个并发请求,后发起的先返回,导致旧数据覆盖新数据」;解法是「取消(AbortController)或忽略(标记位)」,并且StrictMode 下的双执行会暴露这个问题。

赞(0)陌上寒陌上寒阅读()去评论
7.1 fetch 与 axios 封装-陌上寒

7.1 fetch 与 axios 封装

fetch 是浏览器原生 API(体积为零、但不会因 4xx/5xx 报错、无超时、需手动解析),axios 是功能完备的库(拦截器、超时、自动 JSON、进度);实际项目里两者都需要一层统一封装。

赞(0)陌上寒陌上寒阅读()去评论