// utils/requestPool.js
/**
 * 并發(fā)請求池：限制同時發(fā)起的請求數(shù)量
 * @param {Array} requests - 請求函數(shù)數(shù)組（每個函數(shù)返回Promise）
 * @param {Number} limit - 并發(fā)限制數(shù)（默認6）
 * @returns {Promise} - 所有請求完成后的Promise
 */
export function requestPool(requests, limit = 6) {
  let index = 0; // 當前執(zhí)行的請求索引
  const results = []; // 存儲所有請求結(jié)果
  let resolveAll; // 所有請求完成的回調(diào)

  // 創(chuàng)建Promise，用于等待所有請求完成
  const allPromise = new Promise(resolve => {
    resolveAll = resolve;
  });

  // 執(zhí)行單個請求
  async function run() {
    if (index >= requests.length) {
      // 所有請求執(zhí)行完畢，返回結(jié)果
      resolveAll(results);
      return;
    }
    // 取出當前請求函數(shù)
    const request = requests[index];
    index++;
    try {
      // 執(zhí)行請求，存儲結(jié)果
      const res = await request();
      results.push({ success: true, data: res, index: index - 1 });
    } catch (err) {
      // 捕獲錯誤，存儲錯誤信息
      results.push({ success: false, error: err, index: index - 1 });
    }
    // 遞歸執(zhí)行下一個請求（當前請求完成后，再發(fā)起下一個）
    run();
  }

  // 初始化并發(fā)池，啟動limit個請求
  for (let i = 0; i < limit; i++) {
    run();
  }

  return allPromise;
}

// 頁面中使用（示例：批量獲取列表數(shù)據(jù)）
import { requestPool } from '@/utils/requestPool';
import { getListData } from '@/api/list';

// 構(gòu)造請求函數(shù)數(shù)組（每個請求函數(shù)返回Promise）
const requestList = [1,2,3,...,50].map(id => () => getListData(id));

// 限制并發(fā)數(shù)為5，執(zhí)行批量請求
requestPool(requestList, 5).then(results => {
  // 處理所有請求結(jié)果（區(qū)分成功/失敗）
  const successData = results.filter(item => item.success).map(item => item.data);
  const failIds = results.filter(item => !item.success).map(item => item.index + 1);
});

// 優(yōu)化前：循環(huán)發(fā)起單個請求（低效）
const ids = [1,2,3,...,20];
const list = [];
for (const id of ids) {
  const res = await getGoodsDetail(id); // 循環(huán)發(fā)起20次請求
  list.push(res.data);
}

// 優(yōu)化后：合并請求（一次請求）
const ids = [1,2,3,...,20];
const res = await getBatchGoodsDetail({ ids: ids.join(',') }); // 一次請求，攜帶所有id
const list = res.data;

// 1. 封裝Axios，支持取消請求
import axios from 'axios';
// 創(chuàng)建取消令牌生成器
const CancelToken = axios.CancelToken;
let cancel;
// 封裝請求函數(shù)
export function request(config) {
  return axios({
    ...config,
    // 創(chuàng)建取消令牌
    cancelToken: new CancelToken(c => {
      cancel = c; // 保存取消函數(shù)，用于后續(xù)取消請求
    })
  });
}
// 提供取消請求的方法
export function cancelRequest(msg = '請求已取消') {
  if (cancel) {
    cancel(msg);
    cancel = null; // 重置取消函數(shù)
  }
}
// 2. 組件中使用（Vue3）
import { onUnmounted } from 'vue';
import { request, cancelRequest } from '@/utils/request';
export default {
  setup() {
    // 組件銷毀時，取消未完成的請求
    onUnmounted(() => {
      cancelRequest('組件已銷毀，取消請求');
    });
    // 發(fā)起請求
    const fetchData = async () => {
      try {
        const res = await request({
          url: '/api/batch/data',
          method: 'get'
        });
        // 處理數(shù)據(jù)
      } catch (err) {
        // 捕獲取消請求的異常（無需提示用戶）
        if (axios.isCancel(err)) {
          console.log('請求已取消：', err.message);
          return;
        }
        // 處理其他錯誤
        ElMessage.error('請求失敗，請重試');
      }
    };
    return { fetchData };
  }
};

// store/modules/dataCache.js
import { defineStore } from 'pinia';
import { getBatchData } from '@/api/data';

export const useDataCacheStore = defineStore('dataCache', {
  state: () => ({
    batchDataCache: new Map() // 用Map存儲緩存，key為請求參數(shù)，value為數(shù)據(jù)
  }),
  actions: {
    // 批量請求并緩存數(shù)據(jù)
    async fetchBatchData(ids) {
      const cacheKey = ids.join(','); // 用ids拼接作為緩存key
      // 檢查緩存，存在則直接返回
      if (this.batchDataCache.has(cacheKey)) {
        return this.batchDataCache.get(cacheKey);
      }
      // 緩存不存在，發(fā)起請求
      const res = await getBatchData({ ids: cacheKey });
      // 存入緩存（可設(shè)置過期時間，優(yōu)化緩存有效性）
      this.batchDataCache.set(cacheKey, res.data);
      // 可選：設(shè)置緩存過期時間（如5分鐘）
      setTimeout(() => {
        this.batchDataCache.delete(cacheKey);
      }, 5 * 60 * 1000);
      return res.data;
    }
  }
});

// 組件中使用
import { useDataCacheStore } from '@/store/modules/dataCache';

export default {
  setup() {
    const dataCacheStore = useDataCacheStore();
    const fetchData = async () => {
      const ids = [1,2,3,...,10];
      // 優(yōu)先從緩存獲取，無緩存則請求
      const data = await dataCacheStore.fetchBatchData(ids);
    };
    return { fetchData };
  }
};

// 封裝緩存工具
export const cacheUtil = {
  // 存入緩存（帶過期時間）
  setCache(key, value, expire = 24 * 60 * 60 * 1000) {
    const cacheData = {
      data: value,
      expireTime: Date.now() + expire
    };
    localStorage.setItem(key, JSON.stringify(cacheData));
  },
  // 獲取緩存（判斷是否過期）
  getCache(key) {
    const cacheStr = localStorage.getItem(key);
    if (!cacheStr) return null;
    const cacheData = JSON.parse(cacheStr);
    // 過期則刪除緩存，返回null
    if (Date.now() > cacheData.expireTime) {
      localStorage.removeItem(key);
      return null;
    }
    return cacheData.data;
  }
};

// 頁面中使用
import { cacheUtil } from '@/utils/cacheUtil';
import { getDictList } from '@/api/dict';

async function fetchDictData() {
  const cacheKey = 'dict_batch_data';
  // 從本地緩存獲取
  const cacheData = cacheUtil.getCache(cacheKey);
  if (cacheData) return cacheData;
  // 緩存不存在，發(fā)起批量請求
  const res = await getDictList({ type: 'all' });
  // 存入緩存（設(shè)置24小時過期）
  cacheUtil.setCache(cacheKey, res.data, 24 * 60 * 60 * 1000);
  return res.data;
}

// 優(yōu)化前：循環(huán)修改響應(yīng)式數(shù)據(jù)（觸發(fā)多次渲染，卡頓）
const { reactive } = Vue;
const list = reactive([]);
// 假設(shè)results是批量請求返回的50條數(shù)據(jù)
results.forEach(item => {
  list.push(item.data); // 每push一次，觸發(fā)一次渲染
});

// 優(yōu)化后：一次性賦值（僅觸發(fā)一次渲染）
const { reactive } = Vue;
const list = reactive([]);
// 先將數(shù)據(jù)存入普通數(shù)組，處理完成后一次性賦值
const tempList = [];
results.forEach(item => {
  tempList.push(item.data);
});
list.push(...tempList); // 一次性添加所有數(shù)據(jù)，僅觸發(fā)一次渲染

<template>
  <virtual-scroller
    class="virtual-list"
    :items="batchData"
    :item-height="60"
    key-field="id"
  >
    <template #default="{ item }">
      <div class="list-item">{{ item.name }}</div>
    </template>
  </virtual-scroller>
</template>
<script setup>
import { ref } from 'vue';
import { VirtualScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
import { getBatchData } from '@/api/data';
const batchData = ref([]);
// 批量請求數(shù)據(jù)
async function fetchData() {
  const res = await getBatchData({ page: 1, size: 1000 });
  batchData.value = res.data; // 無需分頁，直接賦值給虛擬列表
}
fetchData();
</script>
<style scoped>
.virtual-list {
  height: 500px; /* 固定可視區(qū)域高度 */
  overflow-y: auto;
}
.list-item {
  height: 60px; /* 與item-height一致 */
  line-height: 60px;
}
</style>

// 封裝防抖函數(shù)
export function debounce(fn, delay = 300) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// 組件中使用
import { debounce } from '@/utils/tools';
import { getBatchSearch } from '@/api/search';

export default {
  setup() {
    // 防抖處理批量搜索請求，延遲300ms執(zhí)行
    const handleSearch = debounce(async (keyword) => {
      const res = await getBatchSearch({ keyword, size: 50 });
      // 處理數(shù)據(jù)
    }, 300);

    return { handleSearch };
  }
};

// Axios全局配置超時時間
import axios from 'axios';

axios.defaults.timeout = 12000; // 全局超時12秒

// 單個批量請求單獨設(shè)置超時（按需）
export function getBatchData(params) {
  return axios({
    url: '/api/batch/data',
    method: 'get',
    params,
    timeout: 15000 // 批量請求超時時間可適當延長
  });
}

// 封裝帶重試機制的請求函數(shù)
export async function requestWithRetry(config, retryCount = 2) {
  try {
    const res = await axios(config);
    return res;
  } catch (err) {
    // 若未超過重試次數(shù)，繼續(xù)重試
    if (retryCount > 0) {
      console.log(`請求失敗，剩余重試次數(shù)：${retryCount}`);
      return requestWithRetry(config, retryCount - 1);
    }
    // 重試次數(shù)耗盡，拋出錯誤
    throw new Error('請求失敗，請檢查網(wǎng)絡(luò)后重試');
  }
}

// 批量請求中使用
const res = await requestWithRetry({
  url: '/api/batch/data',
  method: 'get',
  params: { ids: '1,2,3,...,50' }
}, 2); // 失敗重試2次

// 結(jié)合并發(fā)池，處理部分失敗場景
requestPool(requestList, 5).then(results => {
  const successData = [];
  const failList = [];
  results.forEach((item, index) => {
    if (item.success) {
      successData.push(item.data);
    } else {
      // 記錄失敗的請求索引和原因
      failList.push({
        id: index + 1,
        error: item.error.message
      });
    }
  });
  // 提示用戶結(jié)果
  ElMessage.success(`批量請求完成，成功${successData.length}條，失敗${failList.length}條`);
  // 若有失敗項，可展示失敗原因或提供重試按鈕
  if (failList.length > 0) {
    console.log('失敗詳情：', failList);
    // 可選：自動重試失敗項
    const failRequests = failList.map(item => () => requestList[item.id - 1]());
    requestPool(failRequests, 2).then(failResults => {
      // 處理重試結(jié)果
    });
  }
});