在Vue项目开发中，经常会遇到需要同时发起几十个请求的场景。若直接同时发起所有请求，会导致网络拥堵、接口超时、浏览器卡顿甚至触发后端接口限流。影响使用者体验和程序稳定性。这篇文章结合Vue2/Vue3实战，提供4种主流并发控制方案。覆盖不同场景，可直接落地使用，轻松管控几十个请求的并发逻辑。

一、并发控制主要原因

并发控制的主要是：限制同一时间发起的请求数量将几十个请求分批次、有序执行，避免一次性占用过多网络资源。主要要点的2个：

• 控制并发数的观点是。根据后端接口承载能力和浏览器限制，合理设置并发数；
• 至于有序执行。分批次发起请求，上一批请求完成后再发起下一批，确保请求有序且不拥堵；
• 兼容这方面。处理单个请求失败、超时场景，避免单个请求失败导致整个并发流程中断。

以下方案均适配Vue2/Vue3。基于Axios请求库，可直接复制到项目中修改使用。

二、4种实战并发控制方案

方案一的观点是，并发池控制

再看主要思路。封装一个并发池工具，将所有请求放入队列，限制同时执行的请求数量，当某个请求完成后 自动从队列中取出下一个 执行，循环直至所有 完成。该方案灵活可控，可处理成功/失败回调、 超时控制。是几十个 管控的最优选择。老实说，

. 封装并发池工具

// utils/requestPool.jsimport axios from 'axios';// 极简版并发池
export async function requestPool {
const result =;let running = 0;let queue =，const runRequest = async => {
if return result;while {
running++;const requestFn = queue.shift;const index = requestList.length - queue.length - running;try {
const res = await Promise.race();result = { success: true,data: res.data };} catch {
result = { success: false,error: error.message };} finally {
running--;await runRequest;}
}
}，await runRequest;
return result;}
// 极简请求函数
export function createRequestFn {
return => axios({
至于url。`/api/data/${id}`,method: 'get',timeout: 10000
});}

. Vue组件中使用（Vue3示例，Vue2可直接适配）

方案一优势与适配场景

• 说到优势。灵活可控，可自定义並發數、 超時時間；單個請失敗不影響整體流程；請結果順序與發順序一致，代碼復用性強，全局調用。
• 至于適配場景，幾十個請查詢、 提交、 頁初始化多接加載等所有場景 最推薦）。

至于方案二，分批次請分簡易實現。適合對順序要求高場景)

.封裝分工

ode lass-javascriptng-javascript// utils/batchRequest.jsimport axios from 'axios';/* * 分批次請 * @param {Array} requestList - 請列表 * @param {Number} batchSize - 每批數量默認個 * @returns {Promise} - 全部結果組 */export async function batchRequest{ cst result=;//計算總batchSize= Math.ceil;//循環發每for{ //截取當前參cst currentBatch=requestList.slicebatchSize);//發起當前全部並行cst batchResult=await Promise.allSettled(currentBatch.map(id=> axios({ url:/api/data/${
id}。method:'get',timeout: }).n) .catch)));//將當前存入總rult.push;} return result;}

. Vue組件中使用

ode lass-xmlng-xml