Vue 3 中请求拦截器本身不支持队列满时自动排队，需在拦截器外封装请求调度层实现并发控制、优先级和排队逻辑，拦截器仅负责修饰请求（如加 token、loading），排队动作必须前置到请求发出前。
Vue 3 中请求拦截器本身不直接支持“队列满时自动排队”，因为 Axios 拦截器只负责加工单个请求或响应，不具备调度和排队能力。真正实现请求排队控制，需要在拦截器外层封装一个**请求调度层**，把并发限制、优先级、队列等待逻辑做在请求发出前——拦截器只负责统一注入 token、loading 计数等，而排队动作发生在它之前。
核心思路：拦截器不排队，但可配合调度器协同工作
请求拦截器的职责是“修饰请求”，不是“决定是否发出去”。所以排队控制必须前置——在调用 request.get() 等方法时，先交由一个调度器判断：当前并发数是否已达上限？若已满，就暂存请求并返回 Promise，等有空位再触发实际发送。
典型流程如下：
- 业务组件调用
api.userList() - 该函数不直接发请求，而是将配置 + resolve/reject 包装成任务，推入调度队列
- 调度器检查当前运行中请求数（如
runningCount < 4），满足则取出任务，调用真实 Axios 实例发起请求 - 请求进入 Axios 流程 → 经过请求拦截器（加 token、showLoading）→ 发出 → 响应拦截器处理 → 最终 resolve 给业务组件
- 若不满足，并发已满，则该任务挂起，等某请求完成（通过响应拦截器或 Promise.finally 触发回调）后自动拉取下一个
轻量级并发池 + 拦截器协作示例
以下是一个可直接集成的极简并发池（limit = 4），与你已有的 src/utils/request.ts 兼容：
立即学习“前端免费学习笔记（深入）”；
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
新建 src/utils/requestPool.ts：
import { AxiosRequestConfig, AxiosResponse } from 'axios';
import request from './request'; // 就是你封装好的带拦截器的实例
export async function requestPool<T>(
requests: Array<() => Promise<AxiosResponse<T>>>,
limit = 4
): Promise<Array<T>> {
const results: T[] = [];
let running = 0;
let index = 0;
return new Promise((resolve, reject) => {
function run() {
if (index >= requests.length && running === 0) {
resolve(results);
return;
}
while (running < limit && index < requests.length) {
const req = requests[index++];
running++;
req()
.then(res => results.push(res.data))
.catch(err => {
// 错误仍会走到你的响应拦截器，此处可补充聚合错误逻辑
console.warn('Pool request failed:', err);
})
.finally(() => {
running--;
run(); // 尝试启动下一个
});
}
}
run();
});
}
使用方式（不改拦截器，只改调用）：
// 批量获取用户、订单、角色（共3个请求，无需排队）
const [userRes, orderRes, roleRes] = await requestPool([
() => api.getUser(),
() => api.getOrderList(),
() => api.getRoles()
]);
// 一次性发起20个请求，自动按4个并发分批执行
const allData = await requestPool(
Array.from({ length: 20 }, (_, i) => () => api.getItem(i)),
4
);
进阶：支持优先级的排队调度（推荐生产环境）
若需区分高/中/低优先级（如首页关键数据必须插队），可在调度器中引入优先队列（如用 heapq 思路或简单数组排序）。关键点：
- 每个请求配置里加
priority: 'high' | 'medium' | 'low' - 调度器维护多个队列，或每次取任务前对等待队列按 priority 排序
- 高优先级请求到达时，可中断低优先级等待，抢占下一个空位
- 拦截器保持不变，只专注 token、loading、错误剥壳等横切逻辑
为什么不能只靠拦截器实现排队？
因为拦截器是“同步钩子”：它在请求发出前一刻运行，但此时请求已经准备就绪，Axios 内部会立即调用 XMLHttpRequest 或 fetch。你无法在拦截器里让请求“暂停几秒再发”——那会阻塞 JS 主线程，且违背 Promise 异步本质。真正的排队必须基于 Promise 链 + 任务队列 + 并发计数器来异步协调。
