037-axios网络请求封装

037 — ohos/axios 网络请求封装构建可复用的 HTTP 客户端简介在鸿蒙应用开发中网络请求是连接客户端与服务端的核心桥梁。MoneyTrack 项目基于ohos/axios库通过单例模式封装了一个高度可复用的 HTTP 客户端统一管理 baseURL、超时配置、请求/响应拦截器等关键能力。这套封装不仅减少了重复代码更通过拦截器机制实现了全局错误处理、Token 注入、超时重试和日志打点为上层 33 个 API 端点提供了稳定、一致的网络通信基础。核心知识点1. Axios 实例创建与全局配置通过axios.create()创建自定义实例集中管理全局配置避免每个请求单独拼写baseURL统一设置服务端地址支持通过环境变量切换 dev/prod 环境。超时设置30000ms30 秒超时阈值平衡用户体验与网络等待。配合超时重试机制进一步提升弱网下的请求成功率。请求头默认值统一设置Content-Type: application/json、Accept等通用头部。constinstanceaxios.create({baseURL:ApiConfig.getBaseUrl(),// 环境切换dev/prodtimeout:30000,headers:{Content-Type:application/json}});2. 拦截器机制拦截器是 Axios 最强大的扩展点。MoneyTrack 使用多个拦截器实现关注点分离多个请求拦截器按注册顺序先注册先执行多个响应拦截器按注册顺序先注册后执行。请求拦截器链路请求拦截器①Token注入→ 请求拦截器②日志打点→ 发送网络请求 → 响应拦截器①状态码解析→ 响应拦截器②错误分类处理请求拦截器注入 Token 日志打点// 请求拦截器① — Token 注入instance.interceptors.request.use((config){consttokenAppStorage.getstring(token);if(token){config.headers.AuthorizationBearer${token};}returnconfig;},(error)Promise.reject(error));// 请求拦截器② — 日志打点instance.interceptors.request.use((config){console.info([Network]${config.method?.toUpperCase()}${config.url});returnconfig;},(error)Promise.reject(error));响应拦截器解析 data 错误分类处理// 响应拦截器① — 状态码校验instance.interceptors.response.use((response:AxiosResponse){if(response.status200){returnPromise.resolve(response.data);}Logger.error([Network],请求失败${response.config.url},JSON.stringify(response.status));returnPromise.reject(response);},(error:BusinessError){// 错误分类处理if(error.codeECONNABORTED){// 超时错误returnhandleTimeoutRetry(error);}elseif(!error.response){// 断网错误ReminderUtil.showToast(网络异常请检查网络连接);}Logger.error([Network],请求失败,JSON.stringify(error));returnPromise.reject(error);});3. 超时重试机制对于超时或可恢复的网络错误采用最大重试次数 固定延迟的策略自动重试asyncfunctionhandleTimeoutRetry(error:BusinessError,retryCount3):Promiseany{constconfigerror.config;if(!config||!config._retryCount){config._retryCount0;}if(config._retryCountretryCount){config._retryCount;console.info([Network] 第${config._retryCount}次重试${config.url});returnnewPromise((resolve)setTimeout(resolve,1000)).then(()instance.request(config));}returnPromise.reject(error);}4. 环境切换通过ApiConfig模块根据构建标识自动切换 baseURL实现一套代码多环境部署exportclassApiConfig{staticgetBaseUrl():string{if(process.env.NODE_ENVproduction){returnhttps://api.moneytrack.com;}returnhttps://dev-api.moneytrack.com;}}请求拦截→发送→响应拦截完整链路响应拦截器②错误分类处理响应拦截器①状态码解析后端服务Axios 发送请求请求拦截器②日志打点请求拦截器①Token 注入应用层 API响应拦截器②错误分类处理响应拦截器①状态码解析后端服务Axios 发送请求请求拦截器②日志打点请求拦截器①Token 注入应用层 APIalt[成功][失败]发起请求读取 Token 并注入 Header传递 config打印请求日志发送 HTTP 请求网络传输返回响应接收响应校验 status 200传递 response.data返回业务数据传递错误分类处理超时/断网/业务错误Promise.reject最佳实践Token 过期自动刷新在响应拦截器中捕获 401 状态码尝试调用刷新 Token 接口成功后重放原始请求队列。断网兜底在网络不可用时将请求暂存到离线队列配合网络状态监听见 041 篇在网络恢复后自动重发。拦截器顺序多个请求拦截器按注册顺序依次执行多个响应拦截器按注册顺序反向执行。需要先注入 Token 再打日志因此 Token 拦截器先注册。请求取消使用axios.CancelToken或AbortController在页面离开时取消未完成的请求避免内存泄漏。推荐参考文档ohos/axios API 参考Axios 官方文档