告别手写数据请求层用effect-atom的AtomHttpApi与AtomRpc打造类型安全的数据获取方案【免费下载链接】effect-atom项目地址: https://gitcode.com/gh_mirrors/ef/effect-atomeffect-atom 是面向 Effect 生态的响应式状态管理库其中 AtomHttpApi 与 AtomRpc 两个模块可以把 HTTP API 和 RPC 接口一步变成类型安全、自动缓存、可响应失效的数据源——从此告别手写的 fetch 请求、loading 标志和缓存刷新逻辑。为什么手写数据请求层让你疲惫每个前端项目都在重复同一套动作发请求、管理 loading、处理错误、刷新缓存。痛点集中在四点维度手写 fetcheffect-atom 方案请求代码每个页面重复写基于 API 定义声明一次类型安全手工定义类型容易与后端漂移Schema 驱动端到端类型推导请求缓存自己实现或引入第三方库相同参数的请求自动共享同一个 Atom缓存失效变更后手动刷新reactivityKeys声明式自动失效 核心思路只有一句话把数据请求从命令式代码变成响应式数据源。先认识 effect-atom 的三个核心概念Atom响应式数据容器。相同参数创建的请求只会产生同一个 Atom多个组件复用即天然共享缓存Result统一的数据状态模型加载中 / 成功 / 失败见 Result.ts组件里不需要再自己拼 loading/error 状态Runtime连接 Effect 的 Layer 服务系统客户端本身就是可注入的服务。AtomHttpApi 快速上手声明一次处处取数先基于HttpApi声明接口再用AtomHttpApi.Tag创建客户端class Api extends HttpApi.make(api).add( HttpApiGroup.make(counter).add( HttpApiEndpoint.get(count, /count).addSuccess(Schema.Number) ) ) {} class CountClient extends AtomHttpApi.TagCountClient()(CountClient, { api: Api, httpClient: FetchHttpClient.layer, baseUrl: http://localhost:3000 }) {}之后整个项目里取数据就只剩两行// 只读查询返回 AtomResultnumber相同请求自动共享缓存 const countAtom CountClient.query(counter, count, { reactivityKeys: [count] }) // 变更操作返回可调用函数带 payload / headers / reactivityKeys const increment CountClient.mutation(counter, increment)✅query的参数、返回值类型全部由 API 定义推导写错端点名会直接编译报错。AtomRpcWebSocket 与 RPC 后端的同款方案如果后端是effect/rpc提供的 RPC 服务换成AtomRpc.Tag即可用法完全对称class CountClient extends AtomRpc.TagCountClient()(CountClient, { group: Rpcs, protocol: RpcClient.layerProtocolSocket({ retryTransientErrors: true }) }) {} CountClient.query(count, void 0, { reactivityKeys: [count] }) CountClient.mutation(increment)✨ 额外能力当某个 RPC 的成功值是流Stream时query会返回一个可拉取的 Atom非常适合分页加载、无限滚动这类场景。reactivityKeys让缓存失效变成声明式这是整套方案里最省心的部分查询声明reactivityKeys: [count]表示我关心 count 这份数据变更操作完成后也声明同一个 key变更完成 → key 被标记失效 → 所有订阅该 key 的查询自动重新请求。不需要再写queryClient.invalidateQueries也不需要记得哪个页面用了哪份数据。timeToLive数据生命周期精细控制query还支持timeToLive选项传有限时长如1 minuteAtom 空闲一段时间后自动释放适合临时性数据传Duration.infinity等价于keepAlive数据常驻不回收适合全局共享的基础数据。相关行为可以在 AtomHttpApi.test.ts 中直接看到断言。在 UI 框架中使用一行 Hook 取数核心库与框架解耦各框架包提供对应的 HooksReacteffect-atom/atom-reactuseAtomValue(countAtom)读数据、useAtomSet(increment)触发变更Solid / Vueeffect-atom/atom-solid、effect-atom/atom-vue提供同构的响应式 API。组件代码因此变得非常薄订阅 Atom → 用Result渲染三种状态 → 完毕。源码与文档索引想深入细节可以直接阅读核心实现与 API 文档packages/atom/src/AtomHttpApi.tsHTTP 客户端、query/mutation 与缓存键实现packages/atom/src/AtomRpc.tsRPC 客户端与流式拉取支持packages/atom/src/Atom.tsAtom 核心模型与 runtime文档docs/atom/AtomHttpApi.ts.md、docs/atom/AtomRpc.ts.md总结 三句话回顾 effect-atom 的数据获取方案类型安全API 用 Schema 定义请求参数与响应类型全链路推导自动缓存相同请求共享 AtomtimeToLive控制生命周期声明式失效reactivityKeys让变更后的数据刷新不再靠手动维护。当你厌倦了在每个页面复制粘贴 fetch 与缓存逻辑时AtomHttpApi与AtomRpc就是那个可以一次解决、长期受益的类型安全数据获取方案。【免费下载链接】effect-atom项目地址: https://gitcode.com/gh_mirrors/ef/effect-atom创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 告别手写数据请求层：用effect-atom的AtomHttpApi与AtomRpc打造类型安全的数据获取方案
告别手写数据请求层用effect-atom的AtomHttpApi与AtomRpc打造类型安全的数据获取方案【免费下载链接】effect-atom项目地址: https://gitcode.com/gh_mirrors/ef/effect-atomeffect-atom 是面向 Effect 生态的响应式状态管理库其中 AtomHttpApi 与 AtomRpc 两个模块可以把 HTTP API 和 RPC 接口一步变成类型安全、自动缓存、可响应失效的数据源——从此告别手写的 fetch 请求、loading 标志和缓存刷新逻辑。为什么手写数据请求层让你疲惫每个前端项目都在重复同一套动作发请求、管理 loading、处理错误、刷新缓存。痛点集中在四点维度手写 fetcheffect-atom 方案请求代码每个页面重复写基于 API 定义声明一次类型安全手工定义类型容易与后端漂移Schema 驱动端到端类型推导请求缓存自己实现或引入第三方库相同参数的请求自动共享同一个 Atom缓存失效变更后手动刷新reactivityKeys声明式自动失效 核心思路只有一句话把数据请求从命令式代码变成响应式数据源。先认识 effect-atom 的三个核心概念Atom响应式数据容器。相同参数创建的请求只会产生同一个 Atom多个组件复用即天然共享缓存Result统一的数据状态模型加载中 / 成功 / 失败见 Result.ts组件里不需要再自己拼 loading/error 状态Runtime连接 Effect 的 Layer 服务系统客户端本身就是可注入的服务。AtomHttpApi 快速上手声明一次处处取数先基于HttpApi声明接口再用AtomHttpApi.Tag创建客户端class Api extends HttpApi.make(api).add( HttpApiGroup.make(counter).add( HttpApiEndpoint.get(count, /count).addSuccess(Schema.Number) ) ) {} class CountClient extends AtomHttpApi.TagCountClient()(CountClient, { api: Api, httpClient: FetchHttpClient.layer, baseUrl: http://localhost:3000 }) {}之后整个项目里取数据就只剩两行// 只读查询返回 AtomResultnumber相同请求自动共享缓存 const countAtom CountClient.query(counter, count, { reactivityKeys: [count] }) // 变更操作返回可调用函数带 payload / headers / reactivityKeys const increment CountClient.mutation(counter, increment)✅query的参数、返回值类型全部由 API 定义推导写错端点名会直接编译报错。AtomRpcWebSocket 与 RPC 后端的同款方案如果后端是effect/rpc提供的 RPC 服务换成AtomRpc.Tag即可用法完全对称class CountClient extends AtomRpc.TagCountClient()(CountClient, { group: Rpcs, protocol: RpcClient.layerProtocolSocket({ retryTransientErrors: true }) }) {} CountClient.query(count, void 0, { reactivityKeys: [count] }) CountClient.mutation(increment)✨ 额外能力当某个 RPC 的成功值是流Stream时query会返回一个可拉取的 Atom非常适合分页加载、无限滚动这类场景。reactivityKeys让缓存失效变成声明式这是整套方案里最省心的部分查询声明reactivityKeys: [count]表示我关心 count 这份数据变更操作完成后也声明同一个 key变更完成 → key 被标记失效 → 所有订阅该 key 的查询自动重新请求。不需要再写queryClient.invalidateQueries也不需要记得哪个页面用了哪份数据。timeToLive数据生命周期精细控制query还支持timeToLive选项传有限时长如1 minuteAtom 空闲一段时间后自动释放适合临时性数据传Duration.infinity等价于keepAlive数据常驻不回收适合全局共享的基础数据。相关行为可以在 AtomHttpApi.test.ts 中直接看到断言。在 UI 框架中使用一行 Hook 取数核心库与框架解耦各框架包提供对应的 HooksReacteffect-atom/atom-reactuseAtomValue(countAtom)读数据、useAtomSet(increment)触发变更Solid / Vueeffect-atom/atom-solid、effect-atom/atom-vue提供同构的响应式 API。组件代码因此变得非常薄订阅 Atom → 用Result渲染三种状态 → 完毕。源码与文档索引想深入细节可以直接阅读核心实现与 API 文档packages/atom/src/AtomHttpApi.tsHTTP 客户端、query/mutation 与缓存键实现packages/atom/src/AtomRpc.tsRPC 客户端与流式拉取支持packages/atom/src/Atom.tsAtom 核心模型与 runtime文档docs/atom/AtomHttpApi.ts.md、docs/atom/AtomRpc.ts.md总结 三句话回顾 effect-atom 的数据获取方案类型安全API 用 Schema 定义请求参数与响应类型全链路推导自动缓存相同请求共享 AtomtimeToLive控制生命周期声明式失效reactivityKeys让变更后的数据刷新不再靠手动维护。当你厌倦了在每个页面复制粘贴 fetch 与缓存逻辑时AtomHttpApi与AtomRpc就是那个可以一次解决、长期受益的类型安全数据获取方案。【免费下载链接】effect-atom项目地址: https://gitcode.com/gh_mirrors/ef/effect-atom创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考