如何利用ES6 Class封装通用的网络请求库

ES6 Class 封装通用网络请求库，通过统一配置、拦截器机制、语义化快捷方法及 UI 集成，提升可扩展性、可维护性与业务适配性。

用 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 选项，用于静默请求（如轮询、埋点上报）

不复杂但容易忽略细节：比如 token 过期后如何刷新并重发原请求，这类逻辑最好放在响应拦截器里实现，而不是散落在页面代码中。