微信小程序无感刷新

### 微信小程序中实现无感刷新的技术方案 在微信小程序开发中，为了提升用户体验并减少因 token 过期带来的干扰，可以采用 **无感刷新机制** 来自动处理 token 的更新过程。以下是其实现方法及其核心原理： #### 1. 核心概念 无感刷新的核心在于通过拦截网络请求，判断 token 是否有效，并在必要时重新获取新 token 而无需用户干预。此过程中需确保用户的操作不受影响。 #### 2. 请求拦截器的设计 可以通过封装全局的 HTTP 请求函数来实现请求拦截逻辑。每次发送请求前先验证 token 是否有效；如果发现 token 已过期，则触发刷新流程[^1]。 ```javascript // 封装统一请求方法 function request(options) { const { url, method, data } = options; return new Promise((resolve, reject) => { wx.request({ url, method, data, header: { 'Authorization': `Bearer ${getToken()}` // 获取当前存储的token }, success(res) { if (res.statusCode === 401 || res.data.code === 'TokenExpired') { refreshToken().then(() => { resolve(request(options)); // 使用新token重发原请求 }).catch(err => { reject(err); }); } else { resolve(res); } }, fail(err) { reject(err); } }); }); } ``` 上述代码展示了如何捕获到 token 失效错误（如状态码为`401`），随后调用`refreshToken()`完成 token 刷新后再重新提交原始请求[^3]。 #### 3. 队列管理策略 为了避免多个并发请求同时尝试刷新 token 导致重复刷新或其他异常情况发生，可引入队列锁机制。具体做法如下： - 定义一个标志变量用于记录是否正在进行 token 刷新； - 当首次遇到 token 过期时启动刷新动作并将后续待执行的请求加入等待列表； - 新 token 成功返回后依次唤醒这些挂起的任务继续运行。 ```javascript let isRefreshing = false; // 表明是否有正在刷新中的标记 const subscribers = []; // 存储所有需要订阅最新token的结果回调 async function refreshToken() { try { if (!isRefreshing) { isRefreshing = true; let result = await someRefreshApiCall(); // 假设这是实际用来换取新token的服务端API调用 updateStorageWithNewToken(result.new_token); // 更新本地缓存里的token值 while(subscribers.length){ let cb=subscribers.shift(); cb(result.new_token); } isRefreshing=false; }else{ return new Promise(resolve=>{ subscribers.push(token=>resolve(token)); }) } } catch(error){ console.error('Failed to refresh the token', error); throw error; } } ``` 以上片段说明了如何安全地控制单一时刻内的 token 刷新行为以及妥善安排那些由于旧版凭证失效而暂停下来的业务逻辑链条得以延续下去。 #### 4. 缓存优化建议 对于某些高频访问但低敏感度的数据查询场景下，还可以考虑增加一层内存级短期记忆结构——即所谓的“接口响应数据缓冲池”，这样即使偶尔出现短暂性的认证失败状况也能依靠最近一次成功交互所保存下来的信息快速恢复服务可用性而不至于完全阻断进程流向前推进的步伐。 --- ### 总结 综上所述，在微信小程序环境中构建一套完善的无感刷新体系不仅能够极大地改善最终使用者的操作流畅体验，同时也降低了运维人员日常维护成本和技术风险系数。它主要依赖于精心设计好的前置条件校验环节配合后台同步更新授权凭据的能力共同协作达成目标效果。