fix(user): 优化用户页面余额积分等数据加载体验

- useRequest 改为 stale-while-revalidate 机制,缓存命中时立即展示数据并后台刷新
- 增加本地存储持久化,冷启动时先展示存储数据,避免骨架屏
- user 页面使用 mutate 结合本地缓存即时更新界面
- 网络请求失败时保留缓存数据,仅清除 loading 状态
- 优化加载逻辑,保障 30 秒缓存内数据可快速响应且自动刷新
This commit is contained in:
2026-07-04 15:34:46 +08:00
parent df5886a62d
commit b07a3525db
3 changed files with 65 additions and 9 deletions

View File

@@ -167,3 +167,26 @@
- 点击商品跳转详情页,点击加购按钮调用 `addToCart` API
- 复用现有 VIP 价格逻辑(`isVipMember` + `dealerPrice`
- 编译通过
### 15. 用户页余额/积分/优惠券/订单数加载优化
#### 问题分析
- `useRequest` 的缓存是内存级 `Map`,冷启动丢失 → 永远显示骨架屏
- 缓存命中后直接 `return` 不发起网络请求 → 30s 内数据不更新(注释说"静默刷新"但实际没做)
- 无 localStorage 持久化 → 每次打开页面都要等网络
#### 修复 useRequest 缓存为 stale-while-revalidate
- 修改 `src/hooks/useRequest.ts``doRequest` 方法
- 缓存命中时立即展示缓存数据loading=false**不 return**,继续发网络请求后台刷新
- 无缓存时:正常显示 loading skeleton
- 网络失败时:有缓存则保留缓存数据不清除,仅清 loading 状态
#### 添加 localStorage 持久化
- 修改 `src/pages/user/user.tsx`
- `useRequest` 增加 `onSuccess` 回调:请求成功后 `Taro.setStorageSync` 持久化
- `useDidShow``useEffect(isLoggedIn)` 中:先读 `Taro.getStorageSync` 并用 `mutate` 即时展示,再调用 `run` 后台刷新
- 效果:冷启动 0ms 展示上次数据 → 后台静默更新
#### 涉及文件
- 修改:`src/hooks/useRequest.ts`
- 修改:`src/pages/user/user.tsx`