039 — Axios Mock Adapter 本地模拟前后端并行开发的加速器简介在前后端分离的开发模式下前端往往需要等待后端接口就绪才能开始联调这严重拖慢了开发节奏。MoneyTrack 项目引入了hw-agconnect/axios-mock-adapter在本地构建了一套 Mock 数据层使前端可以在后端接口尚未完成时独立开发、调试和自测。通过拦截 Axios 请求并返回预设数据配合 700ms 的延迟模拟真实网络环境结合内存数据库 MockDB 实现数据持久化开发者可以在完全离线的状态下体验完整的业务流程。核心知识点1. AxiosMockAdapter 拦截模式Mock Adapter 的核心原理是拦截 Axios 实例发出的请求不经过真正的网络传输直接根据请求的 HTTP 方法GET/POST/PUT/DELETE和 URL 路径精确匹配拦截规则返回预设的响应数据。2. 延迟模拟通过delayResponse(700)配置统一的 700ms 响应延迟模拟真实网络的传输耗时让前端在开发阶段就能感知到加载状态、骨架屏等交互细节。3. MockDB 内存数据管理为了支持更真实的交互场景如新增账单后列表刷新Mock 层维护了一个内存数据库MockDB所有写操作都会修改内存状态并持久化到本地缓存读操作则从 MockDB 中查询形成完整的数据闭环exportinterfaceMockData{feedbacks:FeedbackRecordDTO[];}constDB_FILEfeedback_database.json;classMockDB{privatedata:MockData|nullnull;// 保存数据到本地缓存publicasyncsave():Promisevoid{if(this.data){awaitFileUtils.saveJsonToCache(this.data,DB_FILE);}}// 获取数据优先从内存读取否则从缓存加载publicasyncgetData():PromiseMockData{if(this.data){returnthis.data;}returnFileUtils.readJsonFromCache(DB_FILE).then((res:MockData){this.datares;returnthis.data;}).catch(async(){this.data{feedbacks:[]};awaitthis.save();returnthis.data;});}}exportconstdb:MockDBnewMockDB();4. 多 HTTP 方法的 Mock 示例Mock Adapter 支持完整的 HTTP 方法模拟以下展示 GET 查询、POST 创建、PUT 更新、DELETE 删除四种操作的完整实现exportclassMockServer{privateadapter:AxiosMockAdapter;constructor(axiosInstance:AxiosInstance){this.adapternewAxiosMockAdapter(axiosInstance,{delayResponse:700});}publicstart():void{// POST — 上传图片this.adapter.onPost(ApiPath.UPLOAD_IMAGE).reply(async(config){constformData:FormDataconfig.data;constcacheImagePath:stringformData.get(file).value;return[HttpStatusCode.Ok,fileUri.getUriFromPath(cacheImagePath)];});// POST — 提交反馈写入 MockDBthis.adapter.onPost(ApiPath.SUBMIT_FEEDBACK).reply(async(config){constsubmit:FeedbackSubmitDTOJSON.parse(config.data);constrecord:FeedbackRecordDTO{id:util.generateRandomUUID(false),description:submit.description,images:submit.images,createAt:Date.now(),};constmockDataawaitdb.getData();mockData.feedbacks.unshift(record);awaitdb.save();return[HttpStatusCode.Ok,true];});// GET — 查询反馈列表从 MockDB 读取this.adapter.onGet(ApiPath.LIST_FEEDBACKS).reply(async(){constmockDataawaitdb.getData();constlist[...mockData.feedbacks];return[HttpStatusCode.Ok,list];});// PUT — 更新账单按 ID 查找并修改this.adapter.onPut(/\/api\/bill\/\d/).reply(async(config){constbillIdconfig.url?.split(/).pop();constupdateDataJSON.parse(config.data);constmockDataawaitdb.getData();constindexmockData.feedbacks.findIndex(ff.idbillId);if(index!-1){mockData.feedbacks[index]{...mockData.feedbacks[index],...updateData};awaitdb.save();return[HttpStatusCode.Ok,mockData.feedbacks[index]];}return[HttpStatusCode.NotFound,{message:记录不存在}];});// DELETE — 删除账单this.adapter.onDelete(/\/api\/bill\/\d/).reply(async(config){constbillIdconfig.url?.split(/).pop();constmockDataawaitdb.getData();mockData.feedbacksmockData.feedbacks.filter(ff.id!billId);awaitdb.save();return[HttpStatusCode.Ok,{deleted:true}];});}}5. Mock 数据的组织方式按业务模块划分独立的 Mock 文件保持项目结构清晰Mock/ ├── MockDB.ets # 内存数据库基类 ├── MockServer.ets # Mock 路由注册入口 ├── feedback/ │ ├── data.ts # 反馈模块假数据 │ └── handlers.ts # 反馈模块拦截器 └── bill/ ├── data.ts # 账单模块假数据 └── handlers.ts # 账单模块拦截器Mock Adapter 请求→匹配→返回流程本地缓存文件MockDB 内存数据库Mock Adapter应用层本地缓存文件MockDB 内存数据库Mock Adapter应用层alt[匹配成功][匹配失败]发起 Axios 请求匹配 onGet/onPost/onPut/onDelete 规则读取/写入数据(可选)持久化到本地返回数据返回 [statusCode, data]返回 404 错误对比Mock Adapter vs 真实服务特性Mock Adapter真实后端服务开发依赖无需后端依赖后端接口就绪响应速度毫秒级可配置延迟依赖网络和服务性能数据控制完全可控依赖测试数据准备故障模拟任意 HTTP 状态码难以复现并行开发前端可独立开发必须串行等待Mock 与真实环境切换通过环境变量控制 Mock 开关开发环境启用 Mock生产环境自动关闭constisMockEnabledprocess.env.NODE_ENVdevelopment;if(isMockEnabled){constmockServernewMockServer(axiosInstance);mockServer.start();console.info([Mock] Mock server started);}最佳实践MockDB 为每个模块独立不同业务模块使用不同的 MockDB 实例避免数据相互污染。延迟模拟贴近真实delayResponse设置在 500-1000ms既能感知加载态又不影响开发效率。正则匹配灵活路由对于带动态参数的 URL如/api/bill/123使用正则表达式而非精确匹配。Mock 数据版本化维护不同场景的 Mock 数据集空数据、边界数据、异常数据方便测试覆盖率。推荐参考文档hw-agconnect/axios-mock-adapter 文档Mock 数据设计最佳实践
039-Axios Mock Adapter本地模拟
039 — Axios Mock Adapter 本地模拟前后端并行开发的加速器简介在前后端分离的开发模式下前端往往需要等待后端接口就绪才能开始联调这严重拖慢了开发节奏。MoneyTrack 项目引入了hw-agconnect/axios-mock-adapter在本地构建了一套 Mock 数据层使前端可以在后端接口尚未完成时独立开发、调试和自测。通过拦截 Axios 请求并返回预设数据配合 700ms 的延迟模拟真实网络环境结合内存数据库 MockDB 实现数据持久化开发者可以在完全离线的状态下体验完整的业务流程。核心知识点1. AxiosMockAdapter 拦截模式Mock Adapter 的核心原理是拦截 Axios 实例发出的请求不经过真正的网络传输直接根据请求的 HTTP 方法GET/POST/PUT/DELETE和 URL 路径精确匹配拦截规则返回预设的响应数据。2. 延迟模拟通过delayResponse(700)配置统一的 700ms 响应延迟模拟真实网络的传输耗时让前端在开发阶段就能感知到加载状态、骨架屏等交互细节。3. MockDB 内存数据管理为了支持更真实的交互场景如新增账单后列表刷新Mock 层维护了一个内存数据库MockDB所有写操作都会修改内存状态并持久化到本地缓存读操作则从 MockDB 中查询形成完整的数据闭环exportinterfaceMockData{feedbacks:FeedbackRecordDTO[];}constDB_FILEfeedback_database.json;classMockDB{privatedata:MockData|nullnull;// 保存数据到本地缓存publicasyncsave():Promisevoid{if(this.data){awaitFileUtils.saveJsonToCache(this.data,DB_FILE);}}// 获取数据优先从内存读取否则从缓存加载publicasyncgetData():PromiseMockData{if(this.data){returnthis.data;}returnFileUtils.readJsonFromCache(DB_FILE).then((res:MockData){this.datares;returnthis.data;}).catch(async(){this.data{feedbacks:[]};awaitthis.save();returnthis.data;});}}exportconstdb:MockDBnewMockDB();4. 多 HTTP 方法的 Mock 示例Mock Adapter 支持完整的 HTTP 方法模拟以下展示 GET 查询、POST 创建、PUT 更新、DELETE 删除四种操作的完整实现exportclassMockServer{privateadapter:AxiosMockAdapter;constructor(axiosInstance:AxiosInstance){this.adapternewAxiosMockAdapter(axiosInstance,{delayResponse:700});}publicstart():void{// POST — 上传图片this.adapter.onPost(ApiPath.UPLOAD_IMAGE).reply(async(config){constformData:FormDataconfig.data;constcacheImagePath:stringformData.get(file).value;return[HttpStatusCode.Ok,fileUri.getUriFromPath(cacheImagePath)];});// POST — 提交反馈写入 MockDBthis.adapter.onPost(ApiPath.SUBMIT_FEEDBACK).reply(async(config){constsubmit:FeedbackSubmitDTOJSON.parse(config.data);constrecord:FeedbackRecordDTO{id:util.generateRandomUUID(false),description:submit.description,images:submit.images,createAt:Date.now(),};constmockDataawaitdb.getData();mockData.feedbacks.unshift(record);awaitdb.save();return[HttpStatusCode.Ok,true];});// GET — 查询反馈列表从 MockDB 读取this.adapter.onGet(ApiPath.LIST_FEEDBACKS).reply(async(){constmockDataawaitdb.getData();constlist[...mockData.feedbacks];return[HttpStatusCode.Ok,list];});// PUT — 更新账单按 ID 查找并修改this.adapter.onPut(/\/api\/bill\/\d/).reply(async(config){constbillIdconfig.url?.split(/).pop();constupdateDataJSON.parse(config.data);constmockDataawaitdb.getData();constindexmockData.feedbacks.findIndex(ff.idbillId);if(index!-1){mockData.feedbacks[index]{...mockData.feedbacks[index],...updateData};awaitdb.save();return[HttpStatusCode.Ok,mockData.feedbacks[index]];}return[HttpStatusCode.NotFound,{message:记录不存在}];});// DELETE — 删除账单this.adapter.onDelete(/\/api\/bill\/\d/).reply(async(config){constbillIdconfig.url?.split(/).pop();constmockDataawaitdb.getData();mockData.feedbacksmockData.feedbacks.filter(ff.id!billId);awaitdb.save();return[HttpStatusCode.Ok,{deleted:true}];});}}5. Mock 数据的组织方式按业务模块划分独立的 Mock 文件保持项目结构清晰Mock/ ├── MockDB.ets # 内存数据库基类 ├── MockServer.ets # Mock 路由注册入口 ├── feedback/ │ ├── data.ts # 反馈模块假数据 │ └── handlers.ts # 反馈模块拦截器 └── bill/ ├── data.ts # 账单模块假数据 └── handlers.ts # 账单模块拦截器Mock Adapter 请求→匹配→返回流程本地缓存文件MockDB 内存数据库Mock Adapter应用层本地缓存文件MockDB 内存数据库Mock Adapter应用层alt[匹配成功][匹配失败]发起 Axios 请求匹配 onGet/onPost/onPut/onDelete 规则读取/写入数据(可选)持久化到本地返回数据返回 [statusCode, data]返回 404 错误对比Mock Adapter vs 真实服务特性Mock Adapter真实后端服务开发依赖无需后端依赖后端接口就绪响应速度毫秒级可配置延迟依赖网络和服务性能数据控制完全可控依赖测试数据准备故障模拟任意 HTTP 状态码难以复现并行开发前端可独立开发必须串行等待Mock 与真实环境切换通过环境变量控制 Mock 开关开发环境启用 Mock生产环境自动关闭constisMockEnabledprocess.env.NODE_ENVdevelopment;if(isMockEnabled){constmockServernewMockServer(axiosInstance);mockServer.start();console.info([Mock] Mock server started);}最佳实践MockDB 为每个模块独立不同业务模块使用不同的 MockDB 实例避免数据相互污染。延迟模拟贴近真实delayResponse设置在 500-1000ms既能感知加载态又不影响开发效率。正则匹配灵活路由对于带动态参数的 URL如/api/bill/123使用正则表达式而非精确匹配。Mock 数据版本化维护不同场景的 Mock 数据集空数据、边界数据、异常数据方便测试覆盖率。推荐参考文档hw-agconnect/axios-mock-adapter 文档Mock 数据设计最佳实践
