客户端并行异步Ajax调用咨询：20个数据包批量请求优化

咱们先拆解下你现有代码的问题：

• setTimeout的写法有误，应该传入一个函数而非对象，这会导致逻辑无法按预期执行
• 即便修正了setTimeout，原代码会在短时间内发起全部20个请求，既可能压垮服务器，也不是你想要的可控部分并行（也就是同时执行指定数量的请求，而非全部串行或全部并行）

下面用jQuery Promise实现可控的部分并行，你可以自由调整同时运行的请求数量：

1. 封装Ajax请求为Promise函数 #

先把单个数据包的请求封装成返回Promise的函数，方便后续用Promise管理队列：

function sendPacket(packet) {
    const req = JSON.stringify(packet);
    return $.ajax({
        url: "sample/sampleaction",
        method: "POST", // 明确指定POST方法
        data: req,
        contentType: "application/json", // 发送JSON数据需指定该请求头
        success: function(data) {
            UpdateSuccessResponse(data);
        }
    });
}

2. 实现并发控制工具函数 #

写一个工具函数，用来限制同时执行的请求数量，维持稳定的并行数：

function runWithConcurrency(tasks, maxConcurrency) {
    let taskIndex = 0;
    const activePromises = [];

    function startNextTask() {
        // 所有任务处理完毕，返回已完成的Promise
        if (taskIndex >= tasks.length) {
            return Promise.resolve();
        }
        
        // 取出当前任务并执行
        const currentTask = tasks[taskIndex++];
        const taskPromise = currentTask().then(() => {
            // 任务完成后，从活跃列表中移除
            activePromises.splice(activePromises.indexOf(taskPromise), 1);
        });
        
        activePromises.push(taskPromise);
        
        // 若未达最大并发数，继续启动下一个任务
        if (activePromises.length < maxConcurrency) {
            startNextTask();
        }
        
        // 监听活跃任务的完成状态，一旦有任务结束就启动新任务
        return Promise.race(activePromises).then(startNextTask);
    }

    // 启动任务队列，并等待所有剩余活跃任务完成
    return startNextTask().then(() => Promise.all(activePromises));
}

3. 调用并发控制函数执行所有请求 #

将数据包转换成任务列表，指定并发数（比如同时跑4个请求，可根据服务器压力调整）：

var dataPackets = [{"Data1"},{"Data2"},{"Data3"},{"Data4"},{"Data5"}, {"Data6"},{"Data7"},{"Data8"},{"Data9"},{"Data10"}, {"Data11"},{"Data12"},{"Data13"},{"Data14"},{"Data15"},{"Data16"}, {"Data17"},{"Data18"},{"Data19"},{"Data20"}];

// 将每个数据包转换为可执行的任务函数
const requestTasks = dataPackets.map(packet => () => sendPacket(packet));

// 执行任务，设置最大并发数为4
runWithConcurrency(requestTasks, 4)
    .then(() => {
        console.log("所有数据包推送完成！");
    })
    .catch(error => {
        console.error("请求过程中出现错误：", error);
    });

核心逻辑说明 #

• 可控并发：通过maxConcurrency参数自由调整同时运行的请求数量，平衡客户端和服务器的负载
• 队列管理：用Promise.race监听活跃请求的完成状态，一旦有请求结束就立刻启动新请求，维持设定的并发数
• 错误捕获：若某个请求失败，catch会捕获到错误，你可以根据需求添加重试逻辑

内容的提问来源于stack exchange，提问作者biju m