手把手教你用ES6 Class封装通用网络请求库

使用 ES6 Class 封装网络请求库，本质上就是将所有重复的配置、千篇一律的错误处理以及令人头疼的状态管理集中抽取出来，让每一次网络请求调用都变得干净利落。这并非简单套用一个 Promise 就能解决，而是需要从可扩展性、可维护性和业务场景适配等角度进行系统设计。你会发现，经过这样的封装之后，团队协作的代码一致性以及后期维护的幸福感都会显著提升。

定义基础类并统一请求配置

首先创建一个 HTTP 类，在构造函数中预设所有公共参数：基础 URL、默认超时时间、通用 header（例如 token），以及是否自动显示 loading 状态。这些配置不需要写死在每次请求里，而是交由实例或子类来接管。

• 借助 static 属性 存放环境变量（开发环境与生产环境对应的 base_url），这样多环境切换就会变得非常轻松
• 对于 token 这类动态 header，建议直接从缓存（wx.getStorageSync）读取，省去每次请求都需要手动传参的麻烦
• 将 success/fail 回调封装进 Promise，统一管理 resolve/reject 逻辑，让异步流程更清晰

内置拦截器机制

在类内部预留 requestInterceptors 和 responseInterceptors 数组，允许在请求发出前或响应返回后插入自定义处理逻辑。这一设计堪称实现可扩展性的灵魂所在。

• 请求拦截：自动添加签名、追加时间戳、过滤敏感字段，几乎可以按需定制任何操作
• 响应拦截：统一判断 code === 0 后再 resolve 数据；遇到非 2xx 状态码或业务错误码（如 401），自动触发登出或重试逻辑
• 拦截器支持链式调用，每个拦截器 return 的参数会依次传给下一个拦截器，逻辑非常清晰且易于调试

提供快捷方法与语义化调用

在类原型上暴露 get、post、put、delete 等快捷方法，内部统一复用 request 主干逻辑。这样调用方的代码看起来非常舒服——语义化，一目了然。

• 每个快捷方法自动设置对应的 method，同时支持传入 data 或 params（GET 请求自动拼接成 query 参数）
• 支持传入局部配置覆盖全局配置，例如某个接口不需要 loading，只需加一个 showLoading: false 即可
• 返回 Promise 对象，可以直接配合 async/await 使用，彻底告别嵌套回调地狱

集成 Loading 与错误反馈

UI 层的交互逻辑也被纳入类中统一管理，但同时保持解耦——通过钩子函数或配置项来控制，不强绑定 wx.showToast。这样既统一了用户体验，又保留了足够的灵活性。

• 默认开启 loading 效果：请求开始时自动调用 wx.showLoading，结束时自动 wx.hideLoading
• 失败时统一调用 wx.showToast，提示内容可以由拦截器或响应体决定（例如 res.data.msg）
• 提供 silent: true 选项，用于静默请求（如轮询、埋点上报），避免用户感知到 loading 或错误弹窗

实现过程并不复杂，但容易忽略一些关键细节。例如 token 过期后如何刷新并重新发送原始请求——这类逻辑最好放在响应拦截器里统一处理，而不是散落在各个页面的业务代码中。这样只需修改一处，全局生效，维护成本自然大幅降低。