API请求代码该放哪一层react-folder-structure的services目录设计lib/fetch封装与业务请求分层规范【免费下载链接】react-folder-structure项目地址: https://gitcode.com/gh_mirrors/re/react-folder-structureAPI请求代码该放哪一层这是每个 React 新手都绕不开的经典问题。开源项目react-folder-structure用 beginner / intermediate / advanced 三套渐进式目录结构给出了答案advanced 版本通过lib/fetch基础封装 功能级services目录形成「基础封装 → 业务服务 → 数据 Hook → 组件」的业务请求分层规范让 API 调用从此不再散落各处。为什么API请求代码要和组件分开3个常见坑写第一个 React 应用时大多数人会直接把fetch写在组件的useEffect里。项目很快会遇到三个问题坑表现后果请求混在 UI 逻辑里组件又管渲染又管网络难以测试、难以复用多个页面重复粘贴token、错误处理到处复制改一处漏一处Hook 和请求职责混淆Hook 里既写时机又写请求细节逻辑越堆越乱核心思路只有一条把怎么发请求和什么时候发请求拆开。三层项目结构速览beginner、intermediate、advanced 的区别react-folder-structure 提供了难度递增的三个可运行项目同一套 Todo/认证/设置/项目功能三种组织方式beginner/——扁平结构组件、Hook、工具函数全部平铺在src/下如beginner/src/TodoContext.js、beginner/src/formatDate.js适合入门熟悉基本盘intermediate/——按页面组织功能代码收拢进intermediate/src/pages/Home/、intermediate/src/pages/Login/等页面目录advanced/——按功能域组织功能收拢进advanced/src/features/目录并新增lib/目录承载通用封装这也是 services 分层规范的完整形态services目录的四层结构从lib/fetch封装到业务请求advanced 版本中一次 API 请求的完整链路是组件 → Hook → 业务服务 → 通用封装。每一层都有明确的家。第1层lib/ —— 通用请求基础advanced/src/lib/fetch.js是所有 API 调用的唯一出口在这里统一处理 base URL、token 注入、错误归一化、超时控制。⚡ 规范业务代码永远不直接调用原生 fetch一律经由lib/fetch发出的封装函数。这样换接口域名、加统一鉴权时只改一个文件。第2层features/模块/services/ —— 业务请求层每个功能域自带一个services子目录只写发什么请求不关心 UI 和状态认证advanced/src/features/authentication/services/login.js、signup.js、getUser.js待办advanced/src/features/todos/services/getTodos.js、updateTodo.js、deleteTodo.js项目advanced/src/features/projects/services/getProjects.js、createProject.js设置advanced/src/features/settings/services/getSettings.js、updateSettings.js命名规范值得抄作业动词 名词一个动作一个文件getTodos/updateTodo/deleteTodo文件职责一目了然。第3层src/services/ —— 跨模块请求advanced/src/services/analytics.js承载那些不属于任何单一功能域的请求典型如埋点上报、日志收集。判断标准如果一个请求被多个 feature 共同调用它就升级到这里。第4层hooks/ —— 数据流编排通用 Hookadvanced/src/hooks/useFetch.js负责何时发请求、如何缓存、如何重试把服务层的返回值变成组件可用的状态功能 Hook如advanced/src/features/authentication/hooks/下的 useLogin.js、useSignup.js、useVerifyPassword.js负责编排服务调用与表单状态组件 components/只负责渲染 ↓ 使用 Hook hooks/、features/*/hooks/管时机与状态 ↓ 调用 业务服务 features/*/services/管请求本身 ↓ 依赖 通用封装 lib/fetch.js管基础能力API请求放哪一层3步判断法拿到一个新请求按顺序问三个问题它是通用能力吗token、超时、错误格式→ 放进advanced/src/lib/只服务单一功能域吗登录、改待办→ 放进对应advanced/src/features/模块/services/跨多个模块埋点、日志→ 放进advanced/src/services/最后「何时请求、如何缓存」的编排逻辑一律上提到hooks/组件保持纯净 ✅目录职责速查表目录职责典型文件lib/通用请求基础封装lib/fetch.jsfeatures/*/services/单模块业务请求login.js、getTodos.jsservices/跨模块公共请求analytics.jshooks/请求时机与状态编排useFetch.js、useLogin.jscomponents/纯渲染零请求TodoForm.js、LoginForm.js提交前自查清单验证你的API请求分层是否正确在合码前用这 5 个问题快速体检你的项目组件和模板字符串里有没有出现fetch(有就下沉到 serviceslib/fetch.js是否是唯一接触网络的地方业务请求是否动词 名词命名、一文件一职责被 2 个以上模块复用的请求是否已提升到src/services/跨项目的相同请求逻辑是否已抽成 Hook 而非复制按照 react-folder-structure 的分层规范请求代码从散落在组件里的一团乱麻变成一条清晰的责任链。建议先跑beginner/感受混乱再对照advanced/的 features 目录重构自己的项目分层习惯会自然养成。【免费下载链接】react-folder-structure项目地址: https://gitcode.com/gh_mirrors/re/react-folder-structure创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考