react-fetching-library的useQuery深度剖析loading、error、刷新与中止React请求四态一次搞定【免费下载链接】react-fetching-librarySimple and powerful API client for react Use hooks or FACCs to fetch data in easy way. No dependencies! Just react under the hood.项目地址: https://gitcode.com/gh_mirrors/re/react-fetching-libraryreact-fetching-library 是一个零依赖、只基于 Fetch API 的 React 数据请求库而 useQuery.ts 中的useQuery是它最核心的数据获取钩子一次调用即可拿到loading、error、payload并内置了query()刷新与abort()中止能力。本文不堆砌代码带你从状态流转的视角读懂这四态是如何被一个 reducer 统一驱动的。useQuery 入门一行 hook 拿到完整请求状态useQuery的签名非常克制——useQuery.ts第一个参数action描述一次请求methodendpoint还可选headers、body等类型定义见 client.types.ts第二个参数initFetch是否挂载时立即请求默认true传false就变成按需请求等调用query()才发请求。返回对象是响应 控制的合并体类型UseQueryResponse见 client.types.ts字段含义来自哪里loading是否正在请求内部状态机error/errorObject是否出错 / 错误详情响应对象payload/status/headers成功数据 / 状态码 / 响应头响应对象query刷新绕过缓存重新请求控制函数abort中止当前进行中的请求控制函数reset清空状态回到初始态控制函数典型用法就是解构出需要的部分传给展示组件——use-query-hook 示例里的容器组件正是这么做的。loading由 responseReducer 驱动的状态机loading不是散落的useState而是由 responseReducer.ts 统一管理的共四种指令指令行为触发时机SET_LOADINGloading: true每次发起请求前SET_RESPONSE写入响应loading: false请求拿到结果RESET_LOADING仅把loading置回false请求被中止时RESET整体回到初始态调用reset()初始值也很讲究useQuery.ts 中若缓存里有该请求的历史响应则loading直接为false有数据就不转圈否则取决于initFetch。测试用例 useQuery.test.tsx 验证了这一点挂载即loading: true请求完成后loading: false且payload就位。error抛出 QueryError 与普通错误的两条路径库对错误做了分级这一点源码里写得很直白普通错误网络失败、5xx 等client 层会把异常捕获成{ error: true, errorObject }返回见 client.tsuseQuery正常更新状态你在渲染里判断error展示提示即可组件不会崩。QueryError主动抛出当 action 配置了config.emitErrorForStatuses命中指定状态码时 client 会构造 QueryError 并抛出。此时useQuery会在 useQuery.ts 直接throw交由 React 错误边界接管——项目自带 QueryErrorBoundary.tsx 组件可以优雅地渲染整页级错误 UI。一句话记忆小错就地处理大错抛给边界。刷新query() 如何绕过缓存强制重新请求返回的query就是 handleReload它等价于handleQuery(true)——多传了一个skipCache true。区别在于首次挂载走的请求会先查 client 上配置的缓存通过 useCachedResponse.ts 命中即返回而query()会跳过缓存直连网络拿到的一定是最新数据。它还返回PromiseQueryResponseT所以你可以await state.query()后再触发后续逻辑比如提交表单后刷新列表。想彻底清掉数据而不是重取用reset()它会派发RESET指令把loading和payload一并归零。中止abort() 与 AbortController 的自动清理这是useQuery最容易被低估的能力实现在 handleQuery / handleAbort每次发请求前创建新的AbortController并abort 掉上一次未完成的请求——连续快速切换参数时旧请求被掐灭天然规避了竞态条件signal一路透传给 fetch你在 UI 上随时可以调用abort()手动取消组件卸载时effect 的 cleanup 会自动handleAbort()杜绝对已卸载组件 setState的告警若收到的响应是AbortErrorhook 会派发RESET_LOADING把loading拉回false不会卡在 loading 圈上。对应测试 useQuery.test.tsx 专门验证了卸载后不再更新状态这一行为。细节加分项缓存命中与参数化请求缓存 key请求参数会被 base64 编码成 cacheKeyuseQuery.ts。key 变化且缓存有值时会先把缓存响应灌进状态再发新请求避免白屏闪烁。FACC 写法不想手动调 hookQuery.ts 组件用函数式子组件render props把同样的状态递给你两种风格随你选。更复杂的场景参数动态变化可用 useParameterizedQuery写操作用 useMutation它们共享同一套 reducer 心智模型。源码导航模块路径钩子实现src/hooks/useQuery/useQuery.ts状态 reducersrc/reducers/responseReducer.ts请求/响应类型src/client/client.types.tsClient 核心src/client/client.tsQueryErrorsrc/client/errors/QueryError.ts错误边界组件src/components/queryErrorBoundary/QueryErrorBoundary.tsx使用示例examples/use-query-hook/测试用例tests/src/hooks/useQuery/useQuery.test.tsx掌握了reducer 管状态、query 管刷新、abort 管中止、边界管大错这四条主线useQuery的其余细节基本都能顺藤摸瓜读懂。零依赖的轻量库却把 React 请求的四态收敛得相当干净——这正是它值得放进你工具包的理由。【免费下载链接】react-fetching-librarySimple and powerful API client for react Use hooks or FACCs to fetch data in easy way. No dependencies! Just react under the hood.项目地址: https://gitcode.com/gh_mirrors/re/react-fetching-library创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考