perf(fe): 修复 token 过期白屏、请求翻倍与失败伪装成空态

token 过期后小程序静默白屏（影响所有用户） - JWT 有效期 7 天，过期后 40100 只 clearToken 不重新登录，而 store.ready 的 promise 已缓存不会重跑，加上 23 处静默 catch，用户看到的是「什么都没有、也没有任何提示」，只能重启小程序 - request 层加 token 失效钩子：自动重新登录并重试一次（只重试一次，防止登录接口本身故障时死循环）；store 注册钩子重置引导缓存 - 补 15s 请求超时、60s 上传超时，超时给明确文案（原先默认 60s 卡住无反馈）请求翻倍 - 每个 tab 页同时用 store.subscribe 和 onShow→ready().then() 加载，而 ready() 内部 loadPets 会 notify 触发 subscriber，首次进入请求翻倍 - subscriber 改为只处理「切换宠物 / 数据变更」，首次加载交给 onShow - 首页 bind:save 与组件实际触发的 saved 事件名不一致，onSheetSave 从未生效；一并修正，并去掉关闭弹层时的全量重载失败伪装成空态 - 社区请求失败时显示「还没有帖子，来发第一条吧」，把故障说成没数据。改为区分「加载失败（可点击重试）」「关注 tab 为空」「确实没有帖子」 - 新增 utils/ui.js 统一错误提示（同文案 3 秒内去重，避免并发失败刷屏），首页与记录页主数据加载失败不再静默 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-28 17:56:35 +08:00
parent 2e3345cdfc
commit 7093e6517d
12 changed files with 86 additions and 14 deletions
@@ -1,5 +1,6 @@
 const store = require('../../utils/store.js');
 const api = require('../../utils/api.js');
+const { toastErr } = require('../../utils/ui.js');

 const TAG_CLASS = { 求助: 'warn', 经验: 'blue', 精选: 'purple', 避坑: 'red', 晒宠: '' };

@@ -33,6 +34,8 @@ Page({
    sheetShow: false,
    sheetType: '',
    sheetPostId: '',
+    loaded: false,
+    loadErr: '',
  },
  onLoad() {
    this._unsub = store.subscribe((pet) => this.setData({ pet }));
@@ -54,10 +57,15 @@ Page({
  },
  loadPosts() {
    const tab = this.data.feedTabs[this.data.feedIdx];
+    this.setData({ loadErr: '' });
    api
      .listPosts(tab, 1)
-      .then((page) => this.setData({ posts: (page.list || []).map(mapPost) }))
-      .catch(() => {});
+      .then((page) => this.setData({ posts: (page.list || []).map(mapPost), loaded: true }))
+      .catch((e) => {
+        // 不能让「加载失败」显示成「还没有帖子」，那是在骗用户
+        this.setData({ loadErr: e.message || '加载失败', loaded: true });
+        toastErr(e);
+      });
  },
  switchFeedTab(e) {
    this.setData({ feedIdx: e.currentTarget.dataset.index });
@@ -41,7 +41,13 @@ module.exports.isUrl = function (s) { return s && s.indexOf('http') === 0; }
    </view>
  </view>

-  <view wx:if="{{posts.length === 0}}" class="empty-hint">还没有帖子，来发第一条吧 🐾</view>
+  <view wx:if="{{loadErr}}" class="empty-hint">
+    {{loadErr}}
+    <view class="retry-btn" bindtap="loadPosts">点击重试</view>
+  </view>
+  <view wx:elif="{{loaded && posts.length === 0}}" class="empty-hint">
+    {{feedTabs[feedIdx] === '关注' ? '还没有关注的人，去「推荐」里关注几个宠友吧 🐾' : '还没有帖子，来发第一条吧 🐾'}}
+  </view>
 </view>
 </scroll-view>

@@ -53,3 +53,4 @@ page{height:100vh;overflow:hidden;display:flex;flex-direction:column}
  color:var(--primary-dark);background:#FFF2DC;border:1rpx solid #FFD39A;
 }
 .follow-btn.on{color:var(--muted);background:#F4F1EC;border-color:var(--line)}
+.retry-btn{margin-top:20rpx;display:inline-block;padding:12rpx 36rpx;border-radius:999rpx;background:#FFF2DC;color:var(--primary-dark);font-weight:700;font-size:26rpx}
@@ -1,5 +1,6 @@
 const store = require('../../utils/store.js');
 const api = require('../../utils/api.js');
+const { toastErr } = require('../../utils/ui.js');

 function todayStr() {
  const d = new Date();
@@ -34,6 +35,8 @@ Page({
    this.setData({ todayDate: todayStr() });
    this._unsub = store.subscribe((pet) => {
      this.setData({ pet });
+      // 首次由 onShow 统一加载，这里只处理之后的「切换宠物 / 数据变更」，避免重复请求
+      if (!this._inited) return;
      this.loadAll();
    });
  },
@@ -47,6 +50,7 @@ Page({
    store
      .ready()
      .then(() => {
+        this._inited = true;
        this.setData({ pet: store.getPet() });
        this.loadAll();
      })
@@ -72,7 +76,7 @@ Page({
    api
      .homeSummary(id)
      .then((summary) => this.setData({ summary }))
-      .catch(() => {});
+      .catch((e) => toastErr(e));
  },
  loadTasks() {
    const id = store.currentPetId();
@@ -81,7 +85,7 @@ Page({
    api
      .getTasks(id, date)
      .then((tasks) => this.setData({ tasks: (tasks || []).map(mapTask) }))
-      .catch(() => {});
+      .catch((e) => toastErr(e));
  },
  onTapDay(e) {
    const { date, active } = e.currentTarget.dataset;
@@ -130,8 +134,9 @@ Page({
    this.setData({ sheetType: type, sheetShow: true });
  },
  closeSheet() {
+    // 只关闭。数据变更由 bind:saved 或 store 的宠物变更通知触发刷新，
+    // 不必每次关弹层（哪怕只是看了眼 AI）都全量重拉一遍
    this.setData({ sheetShow: false });
-    this.loadAll();
  },
  onSheetSave() {
    this.loadTasks();
@@ -97,4 +97,4 @@
 </scroll-view>

 <fab bind:tap="onFab"></fab>
-<bottom-sheet show="{{sheetShow}}" type="{{sheetType}}" bind:close="closeSheet" bind:save="onSheetSave"></bottom-sheet>
+<bottom-sheet show="{{sheetShow}}" type="{{sheetType}}" bind:close="closeSheet" bind:saved="onSheetSave"></bottom-sheet>
@@ -46,6 +46,7 @@ Page({
  onLoad() {
    this._unsub = store.subscribe((pet) => {
      this.setData({ pet, calLoaded: false });
+      if (!this._inited) return; // 首次由 onShow 加载
      this.loadTimeline();
      if (this.data.planView === 'calendar') this.loadCalendar();
    });
@@ -60,6 +61,7 @@ Page({
    store
      .ready()
      .then(() => {
+        this._inited = true;
        this.setData({ pet: store.getPet() });
        this.loadTimeline();
      })
@@ -1,5 +1,6 @@
 const store = require('../../utils/store.js');
 const api = require('../../utils/api.js');
+const { toastErr } = require('../../utils/ui.js');

 function pad(n) {
  return n < 10 ? '0' + n : '' + n;
@@ -90,6 +91,7 @@ Page({
  onLoad() {
    this._unsub = store.subscribe((pet) => {
      this.setData({ pet });
+      if (!this._inited) return; // 首次由 onShow 加载
      this.loadRecords();
    });
  },
@@ -103,6 +105,7 @@ Page({
    store
      .ready()
      .then(() => {
+        this._inited = true;
        this.setData({ pet: store.getPet() });
        this.loadRecords();
      })
@@ -145,7 +148,7 @@ Page({
        const list = (res.list || []).map(mapRecord);
        this.setData({ timeline: list, recPage: 1, recTotal: res.total || 0, recHasMore: list.length < (res.total || 0) });
      })
-      .catch(() => {});
+      .catch((e) => toastErr(e));
    this.loadTrend();
  },
  loadMoreRecords() {
@@ -14,6 +14,7 @@ Page({
  onLoad() {
    this._unsub = store.subscribe((pet) => {
      this.setData({ pet });
+      if (!this._inited) return; // 首次由 onShow 加载
      this.loadData();
    });
  },
@@ -27,6 +28,7 @@ Page({
    store
      .ready()
      .then(() => {
+        this._inited = true;
        this.setData({ pet: store.getPet() });
        this.loadData();
      })
@@ -1,5 +1,7 @@
 // 后端地址。本地联调：微信开发者工具需在「详情 → 本地设置」勾选「不校验合法域名」。
 // 上线时改为你的 https 域名，并在微信公众平台配置 request 合法域名。
-const BASE_URL = 'http://192.168.31.4:9090';
+//const BASE_URL = 'http://192.168.31.4:9090';
+const BASE_URL = 'https://pet.sundynix.cn';
+

 module.exports = { BASE_URL };
@@ -12,14 +12,25 @@ function clearToken() {
  wx.removeStorageSync(TOKEN_KEY);
 }

-// 统一请求：注入 token，解析 {code,message,data}，成功返回 data，失败 reject(Error)
-function request({ url, method = 'GET', data, header = {} }) {
+// token 失效时的重新登录钩子，由 store 注册（放在这里避免 request ← api ← store 循环依赖）
+let reAuth = null;
+function setReAuthHandler(fn) {
+  reAuth = fn;
+}
+
+const TIMEOUT = 15000;
+
+// 统一请求：注入 token，解析 {code,message,data}，成功返回 data，失败 reject(Error)。
+// token 失效（40100）时自动重新登录并重试一次，避免 JWT 过期后小程序静默白屏。
+function request(options, _retried) {
+  const { url, method = 'GET', data, header = {} } = options;
  return new Promise((resolve, reject) => {
    const token = getToken();
    wx.request({
      url: BASE_URL + url,
      method,
      data,
+      timeout: TIMEOUT,
      header: Object.assign(
        { 'Content-Type': 'application/json' },
        token ? { Authorization: 'Bearer ' + token } : {},
@@ -29,13 +40,22 @@ function request({ url, method = 'GET', data, header = {} }) {
        const body = res.data;
        if (body && typeof body === 'object' && 'code' in body) {
          if (body.code === 0) return resolve(body.data);
-          if (body.code === 40100) clearToken();
+          if (body.code === 40100) {
+            clearToken();
+            // 只重试一次，防止登录接口本身出问题时无限循环
+            if (!_retried && reAuth) {
+              return reAuth()
+                .then(() => request(options, true).then(resolve, reject))
+                .catch(() => reject(new Error(body.message || '登录已过期，请重进小程序')));
+            }
+          }
          return reject(new Error(body.message || '请求失败'));
        }
        resolve(body);
      },
      fail(err) {
-        reject(new Error((err && err.errMsg) || '网络错误'));
+        const msg = (err && err.errMsg) || '网络错误';
+        reject(new Error(/timeout/i.test(msg) ? '网络超时，请稍后重试' : msg));
      },
    });
  });
@@ -49,6 +69,7 @@ function uploadFile(filePath) {
      url: BASE_URL + '/api/upload',
      filePath,
      name: 'file',
+      timeout: 60000,
      header: token ? { Authorization: 'Bearer ' + token } : {},
      success(res) {
        try {
@@ -66,4 +87,4 @@ function uploadFile(filePath) {
  });
 }

-module.exports = { request, uploadFile, getToken, setToken, clearToken };
+module.exports = { request, uploadFile, getToken, setToken, clearToken, setReAuthHandler };
@@ -1,5 +1,6 @@
 // 全局状态：登录、宠物列表、当前宠物；服务端驱动 + 发布订阅
 const api = require('./api.js');
+const { setReAuthHandler } = require('./request.js');

 const state = {
  user: null,
@@ -38,6 +39,12 @@ function subscribe(fn) {
 }

 // 登录 + 拉宠物列表（只跑一次）
+// token 失效时清掉引导缓存并重新登录一次，让 request 层能自动重试
+setReAuthHandler(async () => {
+  bootstrapPromise = null;
+  await ready();
+});
+
 function ready() {
  if (!bootstrapPromise) {
    bootstrapPromise = (async () => {
@@ -0,0 +1,15 @@
+// 轻量 UI 提示：统一错误反馈，避免请求失败时页面一片空白、用户不知道发生了什么。
+let lastMsg = '';
+let lastAt = 0;
+
+// 提示错误。相同文案 3 秒内不重复弹，避免多个并发请求同时失败时刷屏。
+function toastErr(e, fallback) {
+  const msg = (e && e.message) || fallback || '加载失败';
+  const now = Date.now();
+  if (msg === lastMsg && now - lastAt < 3000) return;
+  lastMsg = msg;
+  lastAt = now;
+  wx.showToast({ title: msg, icon: 'none', duration: 2000 });
+}
+
+module.exports = { toastErr };