getUserInfo 防重復調用機制

?? 問(wèn)題描述

在頁(yè)面刷新后，getUserInfo() 方法會(huì )被執行兩次：

1. 第一次調用：路由守衛中的調用 (src/permission.ts)
2. 第二次調用：Pinia持久化恢復后的間接調用

??? 解決方案

1. 防重復調用機制

新增狀態(tài)字段

state: () => ({
  // ...其他狀態(tài)
  isLoadingUserInfo: false,    // ?? 防止重復調用的標志
  lastUserInfoFetch: 0,        // ?? 最后一次獲取的時(shí)間戳
})

智能緩存策略

• 緩存時(shí)間：30秒內不重復獲取
• 加載鎖：正在加載時(shí)阻止新的調用
• 強制刷新：支持忽略緩存的強制更新

2. 更新后的 getUserInfo 方法

async getUserInfo(forceRefresh: boolean = false) {
  const now = Date.now();
  const CACHE_DURATION = 30 * 1000; // 30秒緩存
  
  // ?? 防重復調用檢查
  if (!forceRefresh) {
    // 正在加載中，跳過(guò)
    if (this.isLoadingUserInfo) {
      console.log('?? getUserInfo 正在執行中，跳過(guò)重復調用');
      return;
    }
    
    // 緩存未過(guò)期且數據存在，跳過(guò)
    if (緩存有效 && 數據完整) {
      console.log('?? getUserInfo 緩存未過(guò)期，跳過(guò)重復調用');
      return;
    }
  }
  
  // ?? 執行實(shí)際的獲取邏輯
  this.isLoadingUserInfo = true;
  try {
    // 獲取用戶(hù)信息...
  } finally {
    this.isLoadingUserInfo = false;
  }
}

?? 調用日志

現在每次調用都會(huì )輸出詳細日志：

?? getUserInfo 正在執行中，跳過(guò)重復調用
?? getUserInfo 緩存未過(guò)期，跳過(guò)重復調用
?? 開(kāi)始獲取用戶(hù)信息...
? 用戶(hù)信息獲取成功: {
  name: "用戶(hù)名",
  hasDataInfo: true,
  hasMenuList: true,
  timestamp: "12:34:56"
}

?? 使用場(chǎng)景

1. 正常調用（使用緩存）

await userStore.getUserInfo();
// 30秒內重復調用會(huì )被跳過(guò)

2. 強制刷新（忽略緩存）

await userStore.getUserInfo(true);
// 或者使用便捷方法
await userStore.forceRefreshUserInfo();

3. 路由守衛中的調用

// permission.ts 中的調用會(huì )自動(dòng)使用緩存機制
await userStore.getUserInfo();

?? 配置選項

緩存時(shí)間調整

const CACHE_DURATION = 30 * 1000; // 可調整緩存時(shí)間

緩存條件

// 當滿(mǎn)足以下條件時(shí)使用緩存：
// 1. 不是強制刷新
// 2. 沒(méi)有正在加載
// 3. 緩存時(shí)間未過(guò)期
// 4. 用戶(hù)數據完整

?? 注意事項

1. 登出時(shí)重置：登出時(shí)會(huì )清空所有緩存標志
2. 錯誤處理：獲取失敗時(shí)會(huì )釋放加載鎖
3. 強制刷新：特殊情況下可以強制忽略緩存
4. 時(shí)間戳記錄：記錄最后成功獲取的時(shí)間

?? 性能優(yōu)化

• ? 避免了頁(yè)面刷新時(shí)的重復API調用
• ? 減少了不必要的網(wǎng)絡(luò )請求
• ? 提升了頁(yè)面加載速度
• ? 保持了數據的時(shí)效性

現在 getUserInfo() 方法具備了完整的防重復調用機制！