Vue大批量接口请求优化实战：并发池、缓存、虚拟列表与异常处理

脚本专家

在Vue项目中，大批量接口请求（如列表批量查询、批量提交、多模块初始化）常导致请求阻塞、页面卡顿、接口超时或服务器压力过大。本文基于Vue2/Vue3实战，从请求管控、缓存策略、代码优化、异常处理四个维度提供可落地的方案，覆盖核心场景与避坑要点。

## 一、核心痛点
大批量接口请求的核心问题集中在四点：
- 请求并发过多：超出浏览器同域名并发限制（Chrome为6个），导致请求排队阻塞。
- 重复请求浪费：同一接口短时间内多次发起，增加服务器开销。
- 数据处理低效：频繁修改响应式数据触发多次渲染，页面卡顿。
- 异常处理缺失：单个请求失败导致整体中断，缺乏超时和重试机制。

## 二、请求层面优化
### 1. 限制并发请求数量
通过并发池控制同时发起的请求数，避免超出浏览器限制。以下通用函数适配Vue2/Vue3：

2. // utils/requestPool.js
3. export function requestPool(requests, limit = 6) {
4.   let index = 0;
5.   const results = [];
6.   let resolveAll;
7.   const allPromise = new Promise(resolve => { resolveAll = resolve; });
8.   async function run() {
9.     if (index >= requests.length) {
10.       resolveAll(results);
11.       return;
12.     }
13.     const request = requests[index];
14.     index++;
15.     try {
16.       const res = await request();
17.       results.push({ success: true, data: res, index: index - 1 });
18.     } catch (err) {
19.       results.push({ success: false, error: err, index: index - 1 });
20.     }
21.     run();
22.   }
23.   for (let i = 0; i < limit; i++) { run(); }
24.   return allPromise;
25. }

复制代码

使用示例：

2. import { requestPool } from '@/utils/requestPool';
3. import { getListData } from '@/api/list';
4. const requestList = [1,2,3,...,50].map(id => () => getListData(id));
5. requestPool(requestList, 5).then(results => {
6.   const successData = results.filter(item => item.success).map(item => item.data);
7.   const failIds = results.filter(item => !item.success).map(item => item.index + 1);
8. });

复制代码

并发数建议设为4-6，匹配浏览器限制。

### 2. 合并请求，减少接口调用次数
对于批量查询/提交场景，避免循环单个请求，改为一次携带多个参数。需与后端约定批量接口参数格式（如逗号分隔id或数组）。
优化前（低效）：

2. const ids = [1,2,...,20];
3. const list = [];
4. for (const id of ids) {
5.   const res = await getGoodsDetail(id);
6.   list.push(res.data);
7. }

复制代码

优化后：

2. const ids = [1,2,...,20];
3. const res = await getBatchGoodsDetail({ ids: ids.join(',') });
4. const list = res.data;

复制代码

若批量数据过多（如超过100条），可拆分多个合并请求（每50条一次），避免参数过长。

### 3. 取消无效请求
页面切换或组件销毁时，取消未完成的请求，避免资源浪费和数据错乱。结合Axios与Vue3生命周期：

2. // utils/request.js
3. import axios from 'axios';
4. const CancelToken = axios.CancelToken;
5. let cancel;
6. export function request(config) {
7.   return axios({
8.     ...config,
9.     cancelToken: new CancelToken(c => { cancel = c; })
10.   });
11. }
12. export function cancelRequest(msg = '请求已取消') {
13.   if (cancel) {
14.     cancel(msg);
15.     cancel = null;
16.   }
17. }
19. // 组件中（Vue3）
20. import { onUnmounted } from 'vue';
21. import { request, cancelRequest } from '@/utils/request';
22. export default {
23.   setup() {
24.     onUnmounted(() => { cancelRequest('组件已销毁'); });
25.     const fetchData = async () => {
26.       try {
27.         const res = await request({ url: '/api/batch/data', method: 'get' });
28.         // 处理数据
29.       } catch (err) {
30.         if (axios.isCancel(err)) {
31.           console.log('请求已取消', err.message);
32.           return;
33.         }
34.         // 其他错误处理
35.       }
36.     };
37.     return { fetchData };
38.   }
39. };

复制代码

Vue2在beforeDestroy中调用cancelRequest。

## 三、缓存层面优化
### 1. 内存缓存（Pinia/Vuex）
适合单页面会话内复用不常变化的数据。Pinia示例：

2. // store/modules/dataCache.js
3. import { defineStore } from 'pinia';
4. import { getBatchData } from '@/api/data';
5. export const useDataCacheStore = defineStore('dataCache', {
6.   state: () => ({ batchDataCache: new Map() }),
7.   actions: {
8.     async fetchBatchData(ids) {
9.       const cacheKey = ids.join(',');
10.       if (this.batchDataCache.has(cacheKey)) {
11.         return this.batchDataCache.get(cacheKey);
12.       }
13.       const res = await getBatchData({ ids: cacheKey });
14.       this.batchDataCache.set(cacheKey, res.data);
15.       setTimeout(() => { this.batchDataCache.delete(cacheKey); }, 5 * 60 * 1000);
16.       return res.data;
17.     }
18.   }
19. });
20. // 组件中
21. import { useDataCacheStore } from '@/store/modules/dataCache';
22. const store = useDataCacheStore();
23. const data = await store.fetchBatchData([1,2,3]);

复制代码

### 2. 本地存储缓存（localStorage）
适合跨会话的字典表、分类列表等。注意设置过期时间，避免数据过时：

2. export const cacheUtil = {
3.   setCache(key, value, expire = 24*60*60*1000) {
4.     const data = { data: value, expireTime: Date.now() + expire };
5.     localStorage.setItem(key, JSON.stringify(data));
6.   },
7.   getCache(key) {
8.     const str = localStorage.getItem(key);
9.     if (!str) return null;
10.     const data = JSON.parse(str);
11.     if (Date.now() > data.expireTime) {
12.       localStorage.removeItem(key);
13.       return null;
14.     }
15.     return data.data;
16.   }
17. };
18. // 使用
19. import { cacheUtil } from '@/utils/cacheUtil';
20. const cacheData = cacheUtil.getCache('dict_batch_data');
21. if (cacheData) return cacheData;
22. const res = await getDictList({ type: 'all' });
23. cacheUtil.setCache('dict_batch_data', res.data, 24*60*60*1000);

复制代码

## 四、代码渲染优化
### 1. 批量修改响应式数据
避免循环修改响应式数据触发多次渲染，应一次性赋值：

2. // 优化前：每次push触发渲染
3. const list = reactive([]);
4. results.forEach(item => list.push(item.data));
6. // 优化后：先收集到普通数组，再一次性赋值
7. const tempList = [];
8. results.forEach(item => tempList.push(item.data));
9. list.push(...tempList); // 仅触发一次渲染

复制代码

Vue2同样适用，使用Vue.set时也建议一次性修改。

### 2. 虚拟列表渲染
当数据量超过1000条时，使用vue-virtual-scroller只渲染可视区域：

2. <template>
3.   <virtual-scroller class="virtual-list" :items="batchData" :item-height="60" key-field="id">
4.     <template #default="{ item }">
5.       <div class="list-item">{{ item.name }}</div>
6.     </template>
7.   </virtual-scroller>
8. </template>
9. <script setup>
10. import { ref } from 'vue';
11. import { VirtualScroller } from 'vue-virtual-scroller';
12. import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
13. const batchData = ref([]);
14. const fetchData = async () => {
15.   const res = await getBatchData({ page: 1, size: 1000 });
16.   batchData.value = res.data;
17. };
18. fetchData();
19. </script>
20. <style scoped>
21. .virtual-list { height: 500px; overflow-y: auto; }
22. .list-item { height: 60px; line-height: 60px; }
23. </style>

复制代码

Vue2使用vue-virtual-scroller旧版本，配置类似。

### 3. 防抖节流避免重复请求
搜索筛选场景使用防抖：

2. export function debounce(fn, delay = 300) {
3.   let timer = null;
4.   return function(...args) {
5.     clearTimeout(timer);
6.     timer = setTimeout(() => fn.apply(this, args), delay);
7.   };
8. }
9. // 组件中
10. const handleSearch = debounce(async (keyword) => {
11.   const res = await getBatchSearch({ keyword, size: 50 });
12.   // 处理数据
13. }, 300);

复制代码

## 五、异常处理优化
### 1. 超时控制
在Axios全局或单次请求设置超时：

2. import axios from 'axios';
3. axios.defaults.timeout = 12000; // 全局12秒
4. // 单次
5. const res = await axios({ url: '/api/batch/data', method: 'get', params, timeout: 15000 });

复制代码

### 2. 失败重试
封装重试机制：

2. export async function requestWithRetry(config, retryCount = 2) {
3.   try {
4.     return await axios(config);
5.   } catch (err) {
6.     if (retryCount > 0) {
7.       console.log(`剩余重试次数：${retryCount}`);
8.       return requestWithRetry(config, retryCount - 1);
9.     }
10.     throw new Error('请求失败，请检查网络');
11.   }
12. }
13. // 使用
14. const res = await requestWithRetry({ url: '/api/batch/data', params: { ids: '1,2,3' } }, 2);

复制代码

### 3. 部分失败处理
结合并发池，区分成功与失败项，单独处理失败项并支持重试：

2. requestPool(requestList, 5).then(results => {
3.   const successData = [];
4.   const failList = [];
5.   results.forEach((item, index) => {
6.     if (item.success) successData.push(item.data);
7.     else failList.push({ id: index + 1, error: item.error.message });
8.   });
9.   ElMessage.success(`成功${successData.length}条，失败${failList.length}条`);
10.   if (failList.length > 0) {
11.     console.log('失败详情：', failList);
12.     // 可选自动重试
13.     const failRequests = failList.map(item => () => requestList[item.id - 1]());
14.     requestPool(failRequests, 2).then(/* 处理重试结果 */);
15.   }
16. });

复制代码

## 六、Vue2与Vue3差异
- 响应式：Vue3使用reactive/ref，可直接用push批量赋值；Vue2用Vue.set，同样推荐一次性修改。
- 状态管理：Vue3推荐Pinia，Vue2使用Vuex。
- 生命周期：Vue3用onUnmounted取消请求，Vue2用beforeDestroy。
- 虚拟列表：Vue3使用vue-virtual-scroller@next，Vue2使用旧版本。

## 七、总结与落地清单
核心优化动作：
1. 请求管控：并发池限制4-6个，合并批量请求，组件销毁时取消请求。
2. 缓存复用：高频不变用Pinia/Vuex内存缓存，长期不变用localStorage加过期时间。
3. 渲染优化：批量数据先存普通数组再一次性赋值，1000+条用虚拟列表。
4. 异常处理：设置超时10-15秒，失败重试2次，部分失败单独处理不中断。
5. 交互优化：搜索筛选加防抖300ms。
6. 版本适配：按Vue2/Vue3选择对应的生命周期和库版本。

以上方案需与后端配合（提供批量接口、优化响应速度），前端优化与后端结合才能最大提升大批量接口请求的体验。

热心网友1

感谢分享，很系统的实战总结！关于并发池的实现，有个细节想请教：当请求数量很大时（比如上千个），递归调用的 `run` 函数会不会有栈溢出的风险？另外，内存缓存部分提到了 Pinia/Vuex，但缓存失效策略（比如定时清除、根据接口参数动态更新）有没有推荐的做法？期待后续能补充一下缓存与响应式数据同步的注意事项。