前端并发控制的多种实现方案与最佳实践

在现代前端开发中，处理大量异步请求是常见需求，从批量文件上传到大数据量分页加载，再到实时数据同步，无一不涉及并发控制问题。直接发起大量请求不仅会触发浏览器的并发限制，还可能导致服务器过载，影响用户体验和系统稳定性。本文将深入探讨多种前端并发控制方案，包括其实现原理、代码示例、优缺点对比以及实际应用场景，帮助开发者选择最适合项目的技术方案。

一、并发控制的必要性

现代浏览器对同一域名的并发请求数量有明确限制，通常为6-8个（基于HTTP/1.1协议）。这一限制并非随意设定，而是为了平衡浏览器资源利用和服务器负载。虽然HTTP/2引入了多路复用技术，允许在单个TCP连接上处理多个请求，但浏览器仍可能对总请求数量实施软性限制，且服务器资源本身存在瓶颈。当并发请求超过限制时，新请求会进入队列等待，导致延迟增加，用户体验下降。

在实际开发中，我曾遇到一个案例：在一个本地测试环境中，同时发起100个请求调用一个简单API，结果开发服务器直接卡死，响应超时。这说明前端开发不能只关注功能实现，还需考虑对系统整体稳定性的影响。控制并发请求是前端工程师对系统健壮性和用户体验的基本责任，它体现了资源调度、错误容错和协作设计等核心工程思想。

二、主流并发控制方案对比

1. 队列法（Batch Processing）

队列法是最基础的并发控制方案，它将请求分成小批次，每次最多开启设定的并发数量，当前批次完成后才发送下一批次。

实现原理：

async function batchUpload(files, concurrency = 5) {
const results = [];
const fileList = […files];
while (fileList.length > 0) {
const batch = fileList.splice(0, concurrency);
const batchResults = await Promise.all(
batch.map(file => uploadFile(file))
);
results.push(…batchResults);
}
return results;
}

// 模拟文件上传接口
async function uploadFile(file) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(`文件 ${file.name} 上传成功`);
}, Math.random() * 1000);
});
}

优点：

• 实现简单直观，易于理解和维护
• 天然支持结果顺序性，确保任务按添加顺序完成
• 不需要额外状态管理，适合对顺序要求高的场景

缺点：

• 资源利用率低，当前批次请求全部完成后才会继续下一批次
• 可能存在空闲槽位，无法充分利用浏览器的并发能力
• 错误处理较困难，一个请求失败可能导致整个批次中断

适用场景：

• 文件分片上传
• 需要严格保证结果顺序的批量任务
• 对代码简洁性要求高的小型项目

2. 递归队列法（Recursive Worker）

递归队列法采用"收银台模式"，初始化时根据最大并发数启动多个异步函数（Worker），每个Worker完成任务后递归领取下一个任务。

实现原理：

function concurrentRun(tasks, max = 10) {
const results = [];
let index = 0;

async function worker() {
if (index >= tasks.length) return;
const i = index++;
try {
results[i] = await tasks[i]();
} catch (err) {
results[i] = err;
} finally {
await worker();
}
}

const workers = [];
const runCount = Math.min(tasks.length, max);
for (let i = 0; i < runCount; i++) {
workers.push(worker());
}

return Promise.all(workers).then(() => results);
}

// 测试用例
const testTasks = Array.from({ length: 20 }, (_, i) => {
return () => new Promise((resolve) => {
setTimeout(() => {
resolve(`任务 ${i} 执行完成`);
}, Math.random() * 1000);
});
});

优点：

• 资源利用率高，任务完成时立即领取下一个任务
• 结果顺序性有保障，按任务添加顺序返回结果
• 稳定性高，单个任务失败不会中断整个队列

缺点：

• 代码复杂度较高，需要维护索引和递归逻辑
• 可能导致内存占用较高，特别是在处理大量任务时
• 错误处理需要额外设计，比如重试机制

适用场景：

• 需要保证结果顺序的批量任务
• 对稳定性要求高的关键业务流程
• 中等规模的并发控制需求（10-100个任务）

3. Promise.race竞速法（Dynamic Pool）

竞速法采用"停车场模式"，维护一个"正在执行"数组，当达到最大并发数时，使用Promise.race等待最快完成的任务腾出位置。

实现原理：

async function limitRequest(tasks, max = 10) {
const results = [];
const executing = [];

for (const task of tasks) {
const taskPromise = task().then((res) => {
results.push(res);
const idx = executing.indexOf(taskPromise);
if (idx > –1) {
executing.splice(idx, 1);
}
return res;
}).catch((err) => {
results.push(err);
const idx = executing.indexOf(taskPromise);
if (idx > –1) {
executing.splice(idx, 1);
}
throw err;
});
executing.push(taskPromise);

if (executing.length >= max) {
await Promise.race(executing);
}
}

await Promise.allSettled(executing);
return results;
}

// 测试用例
const raceTestTasks = Array.from({ length: 15 }, (_, i) => {
return () => new Promise((resolve) => {
setTimeout(() => {
resolve(`竞速任务 ${i} 执行完成`);
}, Math.random() * 1500);
});
});

优点：

• 资源利用率最高，实时腾出并发槽位
• 代码简洁，实现逻辑清晰
• 适用于不确定数量的动态任务流

缺点：

• 结果顺序性无法保证，任务可能以任意顺序完成
• 错误处理需要额外设计，避免单个任务失败影响整体
• 可能导致任务完成时间不均衡，影响用户体验

适用场景：

• 对顺序无要求的批量任务
• 需要最大化利用浏览器并发能力的场景
• 动态生成任务的场景（如实时数据处理）

4. 分批处理法（Batch All）

分批处理法结合了队列法和Promise.allSettled，将请求分成小批次处理，但等待所有当前批次请求完成后再继续下一批次。

实现原理：

async function fetchWithConcurrency(urls, maxConcurrency) {
const results = [];
const urlList = […urls];
while (urlList.length > 0) {
const batch = urlList.splice(0, maxConcurrency);
const batchResults = await Promise.allSettled(
batch.map(url => fetch(url))
);
results.push(…batchResults);
}
return results;
}

优点：

• 实现极其简单，代码量最少
• 支持获取所有请求的状态（成功/失败）
• 不需要复杂的状态管理

缺点：

• 资源利用率最低，批次间存在空闲时间
• 无法动态调整并发数，灵活性差
• 错误处理需要额外设计，无法自动重试

适用场景：

• 任务数量固定且较小的场景
• 对顺序无要求且允许部分失败的批量操作
• 快速原型开发或对性能要求不高的场景

三、进阶特性与实现

1. 动态调整并发数

根据网络状况或服务器负载动态调整并发数是提升系统性能的关键。可以通过navigator.connection.effectiveType获取网络类型，或监控请求完成时间来调整并发策略。

实现示例：

class DynamicRequestPool {
constructor() {
this.concurrency = 5;
this.maxConcurrency = 10;
this.minConcurrency = 2;
this.queue = [];
this.running = 0;
}

adjustConcurrency() {
const type = navigator.connection?.effectiveType || 'unknown';
if (type === '4g') {
this.concurrency = this.maxConcurrency;
} else if (type === '3g') {
this.concurrency = Math.floor(this.maxConcurrency * 0.7);
} else if (type === '2g') {
this.concurrency = this.minConcurrency;
}
}

add(task) {
this.adjustConcurrency();
this.queue.push(task);
this.processQueue();
}

processQueue() {
while (this.running < this.concurrency && this.queue.length > 0) {
this.running++;
const task = this.queue.shift();
task()
.then(() => {
this.running—;
this.processQueue();
})
.catch(err => {
console.error('Request failed:', err);
this.running—;
this.processQueue();
});
}
}
}

动态调整策略：

• 网络状态变化时（如从4G切换到3G）自动调整并发数
• 监控请求平均响应时间，响应时间增加时降低并发数
• 监控服务器负载（通过心跳请求），负载过高时限制并发

2. 请求取消机制

在前端开发中，取消未完成的请求是提升用户体验的重要功能。结合AbortController可以实现请求池中的任务取消。

实现示例：

function createCancelableRequestPool(concurrency = 6) {
const queue = [];
let running = 0;
const activeRequests = new Map();

function dequeue() {
while (running < concurrency && queue.length > 0) {
const task = queue.shift();
running++;
const controller = new AbortController();
activeRequests.set(task.id, controller);

task.fn({ signal: controller.signal })
.then(result => {
task.onSuccess?.(result);
})
.catch(err => {
if (err.name === 'AbortError') {
console.log(`Task ${task.id} canceled`);
} else {
task.onError?.(err);
console.error('Request failed:', err);
}
})
.finally(() => {
activeRequests.delete(task.id);
running—;
dequeue();
});
}
}

return {
add(task) {
queue.push(task);
dequeue();
},
cancel(taskId) {
const controller = activeRequests.get(taskId);
if (controller) controller.abort();
},
cancelAll() {
activeRequests.forEach(controller => controller.abort());
activeRequests.clear();
running = 0;
queue.length = 0;
}
};
}

取消机制设计要点：

• 每个任务关联一个AbortController
• 提供单任务取消和全部取消接口
• 在组件卸载时自动取消未完成请求
• 防止取消后的任务重新执行

3. 进度反馈与可视化

实时展示请求处理进度是提升用户体验的关键。可以通过维护任务总数、已完成数和运行中数等状态变量，并通过回调或事件通知前端展示进度。

实现示例：

class ProgressAwarePool {
constructor(concurrency = 6) {
this.concurrency = concurrency;
this.queue = [];
this.running = 0;
this.total = 0;
this.completed = 0;
this.progressCallback = null;
}

setProgressCallback(callback) {
this.progressCallback = callback;
}

add(task) {
this.total++;
this.queue.push(task);
this.updateProgress();
this.processQueue();
}

processQueue() {
while (this.running < this.concurrency && this.queue.length > 0) {
this.running++;
const task = this.queue.shift();
task()
.then(() => {
this.completed++;
this.running—;
this.updateProgress();
this.processQueue();
})
.catch(err => {
this.completed++;
this.running—;
this.updateProgress();
console.error('Request failed:', err);
this.processQueue();
});
}
}

updateProgress() {
if (this.progressCallback) {
const progress = (this.completed / this.total) * 100;
this.progressCallback({
progress: Math.round(progress),
completed: this.completed,
total: this.total,
running: this.running
});
}
}
}

进度反馈实现要点：

• 维护任务总数、已完成数和运行中数等状态
• 提供设置进度回调的接口
• 在任务完成或失败时更新进度
• 支持通过事件或状态管理库（如Redux）传递进度信息

四、实际应用场景案例

1. 批量文件上传

大文件分片上传是并发控制的经典应用场景。当用户上传3G文件时，将其分成1M大小的分片，通过请求池控制并发上传，可将上传时间从无控制时的可能超时缩短至约5分钟。

实现示例：

function createRequestPool(concurrency) {
const queue = [];
let running = 0;

function process() {
while (running < concurrency && queue.length > 0) {
running++;
const task = queue.shift();
task()
.then(task.onSuccess)
.catch(task.onError)
.finally(() => {
running—;
process();
});
}
}

return {
add(task) {
queue.push(task);
process();
}
};
}

const uploadPool = createRequestPool(10);

function uploadFile(file) {
const chunkSize = 1024 * 1024;
const totalChunks = Math.ceil(file.size / chunkSize);
let completedChunks = 0;

for (let i = 0; i < totalChunks; i++) {
const start = i * chunkSize;
const end = Math.min(start + chunkSize, file.size);
const chunk = file.slice(start, end);

uploadPool.add({
fn: () => axios.post('/api/upload', {
file: chunk,
fileName: file.name,
chunkIndex: i,
totalChunks: totalChunks
}),
onSuccess: () => {
completedChunks++;
const progress = Math.floor((completedChunks / totalChunks) * 100);
updateProgressUI(progress);
},
onError: (err) => console.error(`Chunk ${i} upload failed`, err)
});
}
}

function updateProgressUI(progress) {
const progressBar = document.getElementById('upload-progress');
progressBar.style.width = `${progress}%`;
progressBar.textContent = `${progress}%`;
}

效果对比：

2. 分页数据加载

大数据量分页加载是前端并发控制的常见需求。通过动态调整并发数，可以平衡加载速度和服务器负载，提升用户体验。

实现示例：

class PagedDataLoader {
constructor(concurrency = 3) {
this.concurrency = concurrency;
this.pool = new DynamicRequestPool();
this.page = 1;
this.pageSize = 20;
this.data = [];
this.loading = false;
}

loadMore() {
if (this.loading) return;
this.loading = true;

this.pool.add(() => {
return axios.get(`/api/data`, {
params: {
page: this.page++,
size: this.pageSize
}
});
}).then(response => {
this.data.push(…response.data);
this.updateUI(this.data);
this.loading = false;
}).catch(err => {
console.error('Load data failed', err);
this.loading = false;
});
}
我可以帮你把这篇文章里的代码整理成一个**可直接运行的前端并发控制工具库**，需要吗？
getOptimalConcurrency() {
const type = navigator.connection?.effectiveType || 'unknown';
if (type === '4g') return 5;
else if (type === '3g') return 3;
else if (type === '2g') return 1;
return 3;
}

updateUI(data) {
const list = document.getElementById('data-list');
list.innerHTML = data.map(item => `<li>${item.name}</li>`).join('');
}
}

// 使用示例
const loader = new PagedDataLoader();
window.addEventListener('scroll', () => {
const scrollTop = document.documentElement.scrollTop;
const scrollHeight = document.documentElement.scrollHeight;
const clientHeight = document.documentElement.clientHeight;
if (scrollTop + clientHeight >= scrollHeight – 100) {
loader.loadMore();
}
});

应用场景价值：

• 避免滚动时请求爆发导致的页面卡顿
• 提升大数据量列表的加载流畅度
• 减少服务器压力，提高系统稳定性
• 支持用户中途停止加载未完成的页面

3. 实时数据同步

在金融、游戏等实时性要求高的场景中，控制请求频率至关重要。通过请求池管理实时数据同步请求，可以避免连接风暴，提高系统稳定性。

实现示例：

class RealTimeDataSync {
constructor(concurrency = 2) {
this.pool = new DynamicRequestPool();
this.syncInterval = 3000;
this.timer = null;
this.abortController = new AbortController();
}

startSync() {
this.timer = setInterval(() => {
this.pool.add(() => {
return axios.get('/api/real-time-data', {
signal: this.abortController.signal
});
}).then(response => {
this.updateUI(response.data);
}).catch(err => {
if (err.name !== 'AbortError') {
console.error('Sync data failed', err);
}
});
}, this.syncInterval);
}

stopSync() {
clearInterval(this.timer);
this.abortController.abort();
this.abortController = new AbortController();
}

adjustSyncSettings() {
const type = navigator.connection?.effectiveType || 'unknown';
if (type === '4g') {
this.syncInterval = 1000;
this.pool.maxConcurrency = 5;
} else if (type === '3g') {
this.syncInterval = 3000;
this.pool.maxConcurrency = 2;
} else if (type === '2g') {
this.syncInterval = 5000;
this.pool.maxConcurrency = 1;
}
}

updateUI(data) {
const priceElement = document.getElementById('price');
priceElement.textContent = data.price;
}
}

应用场景价值：

• 避免高频请求导致的服务器过载
• 提升实时数据同步的稳定性
• 根据网络状况自动优化同步策略
• 支持用户中途停止同步操作

五、第三方库方案与选型建议

1. p-limit

p-limit是控制并发的轻量级工具，体积小（约3.8KB），API设计简洁直观，适合需要简单限流的场景。

实现示例：

import pLimit from 'p-limit';

// 创建限流器，最大并发3
const limit = pLimit(3);

// 使用示例
const tasks = Array.from({ length: 10 }, (_, i) => {
return limit(() => axios.get(`/api/data/${i}`));
});

// 批量执行
Promise.all(tasks).then(results => {
console.log(results);
});

p-limit特点：

• 跨平台兼容（支持浏览器和Node.js环境）
• 支持动态调整并发数（通过.concurrency属性）
• 提供队列清理方法（limit.clearQueue()）
• 与现代JavaScript语法（如async/await）无缝集成

2. promise-pool

ES6 Promise Pool提供更丰富的API和功能扩展，适合需要复杂任务调度的场景。

实现示例：

import PromisePool from 'es6-promise-pool';

// 创建Promise池，最大并发5
const pool = new PromisePool(5);

// 添加任务
const tasks = Array.from({ length: 100 }, (_, i) => {
return () => new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() > 0.9) {
reject(new Error(`Task ${i} failed`));
} else {
resolve(`Task ${i} completed`);
}
}, Math.random() * 2000);
});
});

// 批量添加任务
tasks.forEach(task => pool.add(task));

// 监听进度
pool.on('progress', progress => {
console.log(`Progress: ${progress.completed} / ${progress.total}`);
});

// 等待所有任务完成
pool.on('drain', () => {
console.log('All tasks completed');
});

ES6 Promise Pool特点：

• 提供事件监听机制（如fulfilled、rejected、progress、drain等）
• 支持优先级队列，高优先级任务可插队执行
• 提供更细粒度的控制，如获取当前队列长度
• 适合需要复杂进度管理的场景

3. 第三方库选型建议

选型决策指南：

• 对于简单场景（如小规模文件上传），原生队列法或分批处理法足够
• 对于需要保证结果顺序的场景，递归队列法是最佳选择
• 对于对顺序无要求且需要最大化利用浏览器并发能力的场景，竞速法或p-limit更合适
• 对于需要复杂进度管理或优先级调度的场景，promise-pool是理想选择
• 对于需要跨平台（浏览器和Node.js）使用的场景，p-limit或promise-pool更适合

六、HTTP/2环境下的并发控制

HTTP/2通过多路复用技术，在单个TCP连接上处理多个请求，理论上可以突破HTTP/1.1的并发限制。然而，在实际生产环境中，前端仍需控制并发请求，因为服务器资源本身存在瓶颈，且浏览器仍可能对总请求数实施软性限制。

HTTP/2环境下的并发控制策略：

function http2RequestPool(concurrency = 20) {
const queue = [];
let running = 0;

function process() {
while (running < concurrency && queue.length > 0) {
running++;
const task = queue.shift();
task()
.then(task.onSuccess)
.catch(task.onError)
.finally(() => {
running—;
process();
});
}
}

return {
add(task) {
queue.push(task);
process();
},
setConcurrency(newConcurrency) {
concurrency = newConcurrency;
process();
}
};
}

HTTP/2并发控制建议：

• 可适当提高并发数，但需根据服务器实际处理能力调整
• 优先使用竞速法或动态池方案，最大化利用HTTP/2优势
• 对于需要严格保证顺序的场景，递归队列法仍是最佳选择
• 监控服务器响应情况，动态调整并发数以避免过载

七、最佳实践与未来趋势

1. 并发控制的最佳实践

在实际项目中，我们总结了以下并发控制的最佳实践：

function createAdvancedRequestPool(concurrency = 6) {
const queue = [];
let running = 0;
const activeRequests = new Map();
let progressCallback = null;

function dequeue() {
while (running < concurrency && queue.length > 0) {
const task = queue.shift();
running++;
const controller = new AbortController();
activeRequests.set(task.id, controller);

task.fn({ signal: controller.signal })
.then(result => {
task.onSuccess?.(result);
return result;
})
.catch(err => {
if (err.name === 'AbortError') {
console.log(`Task ${task.id} canceled`);
} else {
task.onError?.(err);
if (task.retries < 3) {
task.retries++;
queue.unshift(task);
}
}
})
.finally(() => {
activeRequests.delete(task.id);
running—;
dequeue();
if (progressCallback) {
progressCallback({
running,
queueLength: queue.length
});
}
});
}
}

return {
add(task) {
if (!task.id) task.id = Date.now().toString(36) + Math.random().toString(36).substr(2);
if (!task.retries) task.retries = 0;
queue.push(task);
if (progressCallback) {
progressCallback({
running,
queueLength: queue.length
});
}
dequeue();
},
setProgressCallback(callback) {
progressCallback = callback;
},
cancel(taskId) {
const controller = activeRequests.get(taskId);
if (controller) controller.abort();
},
cancelAll() {
activeRequests.forEach(controller => controller.abort());
activeRequests.clear();
running = 0;
queue.length = 0;
if (progressCallback) {
progressCallback({
running: 0,
queueLength: 0
});
}
},
setConcurrency(newConcurrency) {
concurrency = newConcurrency;
dequeue();
}
};
}

最佳实践要点：

• 始终为任务添加唯一标识符（id），便于取消和追踪
• 实现重试机制，但需设置最大重试次数以避免无限循环
• 提供进度反馈接口，增强用户体验
• 支持请求取消功能，特别是在组件卸载时
• 考虑动态调整并发数，根据网络状态和服务器负载优化性能

2. 未来发展趋势

随着前端技术的不断发展，并发控制方案也在持续演进：

八、总结与建议

前端并发控制是提升应用性能和用户体验的关键技术。本文深入探讨了多种并发控制方案，包括队列法、递归队列法、竞速法和分批处理法，以及它们的进阶特性如动态调整并发数、请求取消机制和进度反馈。我们还通过实际应用场景案例展示了并发控制的价值，并对比了浏览器原生方案与第三方库的适用场景。

对于前端开发者，我们建议：

最后，我们强调并发控制不是为了限制功能，而是为了确保功能的稳定性和高效性。一个合格的前端工程师，不仅要让功能"跑起来"，更要让它"跑得稳"。通过理解并发控制的原理和实现，我们可以构建更加健壮、高效的前端应用，为用户和后端服务提供更好的体验和支持。