通过请求队列控制并发数，使用PriorityQueue实现优先级调度，结合AbortController处理过期请求，可构建高效请求管理器。
在现代前端开发中，频繁的网络请求可能导致性能问题或服务端压力过大。合理地进行 请求优先级调度 和 并发控制 能有效提升用户体验和系统稳定性。JavaScript 提供了多种方式来实现这些策略，结合 Promise、async/await 和队列机制即可构建可控的请求管理器。
1. 使用请求队列控制并发数
限制同时发送的请求数量是并发控制的核心。可以通过维护一个任务队列，动态控制执行中的请求数量，避免资源耗尽。
以下是一个简单的并发控制器示例：
class RequestPool {
constructor(maxConcurrent = 3) {
this.maxConcurrent = maxConcurrent;
this.running = 0;
this.queue = [];
}
add(requestFn) {
return new Promise((resolve, reject) => {
this.queue.push({
fn: requestFn,
resolve,
reject
});
this._dequeue();
});
}
async _dequeue() {
if (this.running >= this.maxConcurrent || this.queue.length === 0) return;
const task = this.queue.shift();
this.running++;
try {
const result = await task.fn();
task.resolve(result);
} catch (error) {
task.reject(error);
} finally {
this.running--;
this._dequeue();
}
}
}
使用方式：
立即学习“Java免费学习笔记（深入）”；
const pool = new RequestPool(2);
pool.add(() => fetch('/api/user/1').then(res => res.json()))
.then(data => console.log(data));
pool.add(() => fetch('/api/user/2').then(res => res.json()));
2. 实现请求优先级调度
某些请求（如用户交互触发的）应优先于后台同步任务。可在队列中为任务添加优先级字段，高优先级任务排在前面。
修改队列的入队逻辑，按优先级排序：
超级简历WonderCV
28
免费求职简历模版下载制作，应届生职场人必备简历制作神器
28
查看详情
class PriorityQueue {
constructor(maxConcurrent = 3) {
this.maxConcurrent = maxConcurrent;
this.running = 0;
this.queue = [];
}
add(requestFn, priority = 0) {
return new Promise((resolve, reject) => {
// 插入时按优先级降序排列（数值越大越优先）
const task = { fn: requestFn, resolve, reject, priority };
let inserted = false;
for (let i = 0; i < this.queue.length; i++) {
if (task.priority > this.queue[i].priority) {
this.queue.splice(i, 0, task);
inserted = true;
break;
}
}
if (!inserted) {
this.queue.push(task);
}
this._dequeue();
});
}
async _dequeue() {
if (this.running >= this.maxConcurrent || this.queue.length === 0) return;
const task = this.queue.shift();
this.running++;
try {
const result = await task.fn();
task.resolve(result);
} catch (error) {
task.reject(error);
} finally {
this.running--;
this._dequeue();
}
}
}
调用时指定优先级：
const queue = new PriorityQueue(2);
// 高优先级：用户点击加载数据
queue.add(() => fetch('/api/profile').then(r => r.json()), 10);
// 低优先级：页面初始化批量拉取
queue.add(() => fetch('/api/logs').then(r => r.json()), 1);
3. 结合 AbortController 处理过期请求
当高优先级请求频繁触发时（如搜索输入），旧请求可能已无意义。可通过 AbortController 主动取消。
扩展请求函数支持中断：
function createCancelableRequest(url) {
const controller = new AbortController();
const promise = fetch(url, { signal: controller.signal }).then(r => r.json());
return { promise, cancel: () => controller.abort() };
}
// 在队列中管理可取消任务（适用于防抖场景）
4. 实际应用建议
在真实项目中，可以封装一个统一的 requestManager，集成并发控制、优先级、缓存、重试等功能。例如：
- 将接口按类型分类（UI交互类设高优先级，埋点同步设低优先级）
- 对重复请求做去重或合并（如使用 Promise 缓存）
- 监控运行状态，动态调整并发数（如弱网环境下降低并发）
基本上就这些。通过队列 + 优先级 + 中断机制，就能在 JavaScript 中实现灵活可靠的网络请求调度。
相关标签：
javascript java js 前端 json 前端开发 ai 排列 JavaScript 封装 接口 并发 promise ui
大家都在看：
动态切换图片与按钮文本：一个JavaScript交互教程
动态调整HTML元素高度：JavaScript实现元素间高度联动与比例设置
解决JavaScript焦点陷阱中Tab键循环焦点立即跳转的问题
修复JavaScript智力问答游戏中答案判断错误的问题
JavaScript动态添加表格行并正确初始化Select2下拉框的教程
动态调整HTML元素高度：JavaScript实现元素间高度联动与比例设置
解决JavaScript焦点陷阱中Tab键循环焦点立即跳转的问题
修复JavaScript智力问答游戏中答案判断错误的问题
JavaScript动态添加表格行并正确初始化Select2下拉框的教程
本站资料仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
THE END
暂无评论内容