news 2026/7/19 22:48:16

038-API层架构设计

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
038-API层架构设计

038 — API 层架构设计:从枚举定义到模块化 API 管理

简介

随着业务复杂度的增长,网络请求的管理方式直接影响项目的可维护性。MoneyTrack 采用了一套分层清晰的 API 架构:底层是单例 Axios 客户端(037 篇已述),中间层是枚举驱动的接口地址集中管理,上层是按业务域划分的模块化 API 文件。这套架构使得 30+ 个网络端点的查找、维护和调试变得井然有序,新增一个接口只需添加枚举值和对应方法,无需改动既有代码。

API 三层架构全景

🔗 HTTP 客户端

📋 枚举层 (单一数据源)

📦 API 模块层

📱 ViewModel 调用层

HomeViewModel.ets

BillViewModel.ets

UserViewModel.ets

Bill.ets
getBillList()

Asset.ets
getAssetList()

User.ets
login / logout / updateUserInfo

RequestUrlMap
30+ 端点枚举

Request.ets
Axios 单例 + 拦截器

核心知识点

1. API 枚举集中管理

将所有后端接口地址定义在统一的RequestUrlMap枚举中,实现接口地址的"单一数据源":

  • 避免硬编码:字符串散落在各文件中容易拼写错误,枚举统一管控。
  • 自文档化:枚举名即接口用途说明,一目了然。
  • 类型安全:配合 TypeScript 类型检查,修改地址时全局可控。

以下是 MoneyTrack 项目中RequestUrlMap枚举的完整展示(覆盖用户、家庭、账本、账单、资产五大模块):

exportenumRequestUrlMap{/** ===== 用户相关 ===== */USER_LOGIN='user/login',USER_LOGOUT='user/logout',USER_INFO='user/info',USER_MEMBERSHIP='user/membership',/** ===== 家庭相关 ===== */FAMILY_CREATE='family/create',FAMILY_JOIN='family/join',FAMILY_MEMBERS='family/members',FAMILY_LEAVE='family/leave',FAMILY_REMOVE_MEMBER='family/removeMember',/** ===== 账本相关 ===== */ACCOUNT_BOOK_LIST='accountBook/list',ACCOUNT_BOOK_CREATE='accountBook/create',ACCOUNT_BOOK_UPDATE='accountBook/update',ACCOUNT_BOOK_DELETE='accountBook/delete',ACCOUNT_BOOK_SWITCH='accountBook/switch',/** ===== 账单相关 ===== */BILL_LIST='bill/list',/** ===== 资产相关 ===== */ASSET_LIST='asset/list',}

2. 模块化 API 文件

按业务领域将 API 调用拆分到独立文件,每个文件只负责一个业务模块。采用类 + 单例导出模式,既保持了面向对象的封装性,又方便上层调用:

// Asset.ets — 资产模块 APIclassAssetApis{publicgetAssetList(ownerId?:number):Promise<BaseResponse>{constparams:Record<string,Object>={};if(ownerId!==undefined){params['ownerId']=ownerId;}returnrequest.get(RequestUrlMap.ASSET_LIST,{params});}}constinstance=newAssetApis();export{instanceasAssetApis};
// User.ets — 用户模块 APIclassUserApis{publiclogin(params?:UserLoginReq):Promise<BaseResponse>{returnrequest.get(RequestUrlMap.USER_LOGIN,{params});}publiclogout():Promise<BaseResponse>{returnrequest.get(RequestUrlMap.USER_LOGOUT);}publicupdateUserInfo(data:UpdateUserInfoReq):Promise<BaseResponse>{returnrequest.put(RequestUrlMap.USER_INFO,data);}publicsubscribeMembership():Promise<BaseResponse>{returnrequest.post(RequestUrlMap.USER_MEMBERSHIP);}publicgetMembershipInfo():Promise<MembershipInfoResp>{returnrequest.get(RequestUrlMap.USER_MEMBERSHIP);}}constinstance=newUserApis();export{instanceasUserApis};

3. 类型安全的泛型约束

每个 API 都明确定义了请求参数类型和响应数据类型,利用 TypeScript 泛型在编译期捕获类型错误:

// 定义泛型响应结构exportinterfaceBaseResponse<T=any>{code:number;message:string;data:T;}// 在 API 方法中使用泛型约束classBillApis{publicgetBillList(memberId?:number):Promise<BaseResponse<BillItem[]>>{constparams:Record<string,Object>={};if(memberId!==undefined){params['memberId']=memberId;}returnrequest.get(RequestUrlMap.BILL_LIST,{params});}}

当后端返回的数据结构发生变化时,只需修改泛型类型定义,所有调用方都会收到编译警告,极大降低回归风险。

4. API 版本管理

URL 中携带版本号是管理 API 演进的通行做法。在request层通过 baseURL 携带主版本号,或通过拦截器自动注入版本参数:

// 方案一:baseURL 携带版本号constinstance=axios.create({baseURL:'https://api.moneytrack.com/v2/',// 整个应用使用 v2 版本});// 方案二:按模块在 API 路径中指定版本enumRequestUrlMap{USER_LOGIN_V1='v1/user/login',USER_LOGIN_V2='v2/user/login',// 渐进式升级}
特性枚举集中管理硬编码字符串
可维护性一处修改全局生效四处查找替换
自文档化枚举名说明用途需额外注释
类型检查编译期检测运行时才能发现
协作效率新人快速了解接口需翻阅文档

最佳实践

  1. 枚举命名规范:采用模块_动作格式(如USER_LOGINBILL_LIST),按模块分组并用注释分隔,方便快速定位。
  2. API 文件粒度:一个业务模块一个文件,文件内只导出类实例(单例),避免命名空间污染。
  3. 类型优先:先定义请求/响应的 TypeScript 接口,再实现 API 方法。让类型定义驱动开发流程。
  4. 渐进式版本升级:新旧版本接口枚举共存,逐个模块迁移,避免大版本一次性升级的风险。

推荐参考文档

  • TypeScript 枚举与泛型文档
  • RESTful API 版本管理最佳实践
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/19 22:43:59

基于WebAssembly的位图矢量化技术实现机制与工程实践

基于WebAssembly的位图矢量化技术实现机制与工程实践 【免费下载链接】SVGcode Convert color bitmap images to color SVG vector images. 项目地址: https://gitcode.com/gh_mirrors/sv/SVGcode 在数字内容创作和Web开发领域&#xff0c;位图图像的分辨率限制始终是一…

作者头像 李华
网站建设 2026/7/19 22:42:04

【闲聊】如何睡得既少做得还多(方法)

编写于2026年5月29日(周五)&#xff5e;2026年7月18日(周六)。 全文共计约3600个字符&#xff0c;阅读共需要大概9分钟。 很唬人的一个标题是吧&#xff1f; 细想一下&#xff0c;其实也还能够接受。这里直接说结论&#xff0c;要做到睡得既少做得还多&#xff0c;就是要做到…

作者头像 李华
网站建设 2026/7/19 22:37:32

Switch2Cursor完整指南:JetBrains与Cursor编辑器高效切换终极方案

Switch2Cursor完整指南&#xff1a;JetBrains与Cursor编辑器高效切换终极方案 【免费下载链接】switch2cursor A JetBrains IDE plugin that enables smooth switching between JetBrains IDE and Cursor, with automatic cursor position sync. Features keyboard shortcuts, …

作者头像 李华
网站建设 2026/7/19 22:35:41

2026年7月市场上最具竞争力的全球4强企业建站系统最新测评报告,含零代码、低代码、AI+编程

一、四个建站工具总表品牌建站方式适合谁核心功能价格主要局限BBWEYY首创AISAAS建站模式货代公司、商贸公司、自营品牌公司快速搭起官网基础盘&#xff0c;先完成展示、询盘和联系承接建站定价从700-5000元/年降到年均350-2500元&#xff0c;每月还配有5-7折的优惠名额&#xf…

作者头像 李华
网站建设 2026/7/19 22:33:53

Illustrator脚本大全:30+个自动化工具让你的设计效率飙升

Illustrator脚本大全&#xff1a;30个自动化工具让你的设计效率飙升 【免费下载链接】illustrator-scripts Adobe Illustrator scripts 项目地址: https://gitcode.com/gh_mirrors/il/illustrator-scripts 还在为Adobe Illustrator中的重复性操作感到烦恼吗&#xff1f;…

作者头像 李华