张斌网站建设wordpress拉

1. 基本思路

• 维护一个请求队列，存放待执行的请求。

• 设置最大并发数，控制同时进行的请求数量。

• 当一个请求完成时，从队列中取出下一个请求执行。

2.代码实现

class RequestPool {constructor(maxConcurrent) {this.maxConcurrent = maxConcurrent; // 最大并发数this.queue = []; // 请求队列this.activeCount = 0; // 当前活跃的请求数}// 添加请求到队列addRequest(requestFn) {return new Promise((resolve, reject) => {const task = async () => {try {const result = await requestFn();resolve(result);} catch (error) {reject(error);} finally {this.activeCount--;this.next(); // 请求完成后执行下一个}};this.queue.push(task); // 将任务加入队列this.next(); // 尝试执行下一个任务});}// 执行下一个请求next() {if (this.activeCount < this.maxConcurrent && this.queue.length > 0) {this.activeCount++;const task = this.queue.shift(); // 从队列中取出任务task(); // 执行任务}}
}// 示例使用
const pool = new RequestPool(3); // 最大并发数为3// 模拟请求函数
function mockRequest(id) {return () =>new Promise((resolve) => {setTimeout(() => {console.log(`Request ${id} completed`);resolve(`Response from request ${id}`);}, Math.random() * 2000); // 随机延迟});
}// 添加10个请求
for (let i = 1; i <= 10; i++) {pool.addRequest(mockRequest(i)).then((response) => {console.log(response);});
}

3. 代码说明

• RequestPool 类管理请求队列和并发控制。

• addRequest 方法将请求加入队列，并返回一个 Promise，用于处理请求结果。

• next 方法检查当前活跃请求数，如果未达到最大并发数，则从队列中取出请求执行。

• mockRequest 是一个模拟的异步请求函数，用于测试。

4.运行结果

• 最多同时执行 3 个请求，当一个请求完成后，下一个请求会自动开始。

• 控制台会依次输出请求的完成情况和响应结果。

5. 适用场景

• 需要限制并发请求数量的场景，如批量上传文件、分页加载数据等。

• 避免前端同时发起过多请求导致性能问题。