一、方案背景

在前端中经常会出现多接口并发的场景，而针对请求常规方式会一股脑发送给浏览器，浏览器中会对大量请求进行排队，但大量请求推送至浏览器就会占用内存，最终达到一定量级导致页面卡顿。甚至假死常规请求图如下

二、解决思路

针对此模式，可以创建如下序列，待发送请求池作为中间层，只作为载体，每次推送固定数量到浏览器，当浏览器主线程中存在接口执行完毕后代表主线程中接口数量减少，在从待发送请求中取出新的接口放入主线程，这样就能实现控制主线程发送数量避免内存溢出。

• 创建待发送请求池
• 控制最大并行请求数量
• 指定接口缓存，如数据源，结合请求。响应拦截器处理一下

流程图如下

三、具体代码实现

请求并发控制方案概述

这是一个基于请求池的并发控制方案，用于管理前端应用中的 HTTP 请求。通过双队列机制控制并发数量，避免同时发起过多请求导致的性能问题和浏览器限制。

主要特性

• 并发控制限制同时执行的请求数量
• 双队列设计待执行队列+ 执行中队列
• 请求取消支持取消单个或全部请求，基于 AbortController
• 缓存支持可配置的请求结果缓存机制
• 内存调整请求完成后自动清理引用，防止内存泄漏
• 非阻塞调度使用 让出主线程。避免阻塞 UI
• 防重复调度通过 isProcessing

架构设计 - 状态管理与主要机制

const poolState = {
pendingQueue:,// 待执行队列
runningQueue:,// 执行中队列
cacheStore: new Map,// 缓存存储
maxConcurrent:,// 最大并发数
maxPendingQueue: Infinity,// 待执行队列最大长度
isProcessing: false // 防止重复调度标志位
};

防重复调度

const scheduleExecute = => {
if return;// 已在处理中，直接返回
poolState.isProcessing = true;setTimeout => {
processQueue;poolState.isProcessing = false;// 处理完成，重置标志
});}，

批量处理

const processQueue = => {
// 计算可用槽位
const slots = poolState.maxConcurrent - poolState.runningQueue.length;const count = Math.min;// 批量启动
for {
const task = poolState.pendingQueue.shift;其实，if {
poolState.runningQueue.push;executeRequest;}
}
}，

API 文档

addRequest

Add 请求到队列。

参数：

• config : axios 请求配置对象。
• axiosInstance : axios 实例。

返回：

• Promise : 请求的 Promise 对象。

import axios from 'axios';import { addRequest } from '@/utils/requestPool';const config = {
method这方面，'get'。url: '/api/users',params: { page: }
};addRequest
.n)
.catch);

setMaxConcurrent

import { setMaxConcurrent } from '@/utils/requestPool';// 设置最大并发数为
setMaxConcurrent;

clearAllRequests

import { clearAllRequests } from '@/utils/requestPool';const count = clearAllRequests;console.log，console.log;

getPoolState

import { getPoolState } from '@/utils/requestPool';const state = getPoolState;按理说，console.log;console.log，console.log;

getCacheKey / getCache / setCache / clearCache

- getCacheKey 用于生成缓存键，返回字符串或 null。- getCache / setCache / clearCache 为缓存操作方法。怎么说呢，

使用示例

基础集成 - Axios 拦截器

// src/utils/request.js
import axios from 'axios';import { addRequest,clearAllRequests } from './requestPool';按理说，const service = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL。timeout:
})，// 请求拦截器
service.interceptors.request.use(
config => {
// 标记使用请求池
config.usePool = true;return config;},error => Promise.reject
);// 响应拦截器
service.interceptors.response.use(
response => response.data,error => {
console.error;return Promise.reject;}
)，// 重写 axios 请求方法，使用请求池
const originalRequest = service.request.bind;service.request = function {
if {
// 使用请求池
return addRequest;}
// 不使用请求池，直接请求
return originalRequest;}，export default service;export { clearAllRequests };按理说，

API 调用示例

// src/api/user.js
import request from '@/utils/request';// 获取使用者列表
export const getUserList = => {
return request({
说到url。'/api/users',method: 'get',params
});
}，// 获取使用者详情
export const getUserDetail = => {
return request({
url的观点是。`/api/users/${id}`,method: 'get'
});}，不过，// 创建使用者
export const createUser = => {
return request({
再看url。'/api/users',method: 'post',data
});}，

组件中使用

路由切换时取消请求

// src/router/index.js
import { createRouter,createWebHistory } from 'vue-router';import { clearAllRequests } from '@/utils/requestPool';const router = createRouter({
history: createWebHistory,routes:
});// 路由切换前取消所有请求
router.beforeEach => {
if {
const count = clearAllRequests;console.log，}
next;})，export default router;

批量请求示例

// 批量加载使用者详情
async function loadUserDetails {
const promises = userIds.map);try {
const results = await Promise.all;console.log，return results;说起来，} catch {
console.error;怎么说呢，throw error;}
}
// 使用示例
const userIds =;不过，loadUserDetails;

并发数

import { setMaxConcurrent,getPoolState } from '@/utils/requestPool';// 根据网络状况函数
function adjustConcurrency {
const connection = navigator.connection;按理说，if {
const effectiveType = connection.effectiveType;switch {
case 'slow-2g':
case '2g':
setMaxConcurrent;break，case '3g':
setMaxConcurrent;break，case '4g':
default:
setMaxConcurrent;break，}
console.log;console.log.maxConcurrent);}
}
// 网络变化监听
if {
navigator.connection.addEventListener;}

：实现请 求优先级

//
版本 - 支持优先级
export const addRequestWithPriority = =>{
return new Promise=>{
const abortController= new AbortController;

const task ={ 从config来看，{...config。signal :abortController.signal},resolve,reject,axiosInstance,abortController,priority// 添加优先级字段 };

// 根据优先级插入队列 const index=poolS tate .pendingQueue .findIndex;if{ poolS tate .pendingQueue .push;说起来，}else{ poolS tate .pendingQueue .splice;} scheduleExecute;})，};

// 使用示例 addRequestWithPriority;// 高优先级 addRequestWithPriority;// 普通优先级

---