如何实现前5个AJAX请求完成后执行下一批，直至全部请求完成？

没问题，我来帮你实现这个需求——让AJAX请求每5个一组，等整组全部完成后再执行下一组，直到处理完所有数组元素。先帮你修正原代码里的几个小错误，再给出完整的实现方案：

原代码的几个小问题 #

• JavaScript里创建数组不能用array()，应该用字面量[]或者Array()
• for循环的初始化应该是var i = 0，不是i == 0
• 点击事件的回调函数括号写错了，应该是function()

完整实现代码 #

<script type="text/javascript">
$('#send').click(async function() {
    // 生成1到50的数组（替代你原代码里的array(1,2,...,50)）
    const foo = Array.from({length: 50}, (_, index) => index + 1);
    const batchSize = 5;
    // 把数组分成每5个一组的批次
    const batches = [];
    for (let i = 0; i < foo.length; i += batchSize) {
        batches.push(foo.slice(i, i + batchSize));
    }

    // 依次处理每个批次
    for (const batch of batches) {
        // 把当前批次的每个请求包装成Promise
        const ajaxPromises = batch.map(id => {
            return $.ajax({
                url: '/ajax.php',
                type: 'post',
                data: { id: id }
                // 这里可以加上你的success/error回调，或者用Promise的then/catch
            });
        });

        // 等待当前批次的所有AJAX请求全部完成
        await Promise.all(ajaxPromises);
        console.log(`批次完成，已处理${batch.length}个请求`);
    }

    console.log('所有AJAX请求已全部完成');
});
</script>

代码思路解释 #

1. 数组分组：先把foo数组拆分成多个长度为5的子数组，每个子数组就是一个批次
2. 异步批次处理：使用async/await配合Promise.all，Promise.all会等待当前批次里的所有AJAX请求都完成（不管成功还是失败，如果你需要过滤失败的请求，可以额外处理），然后才会进入下一个批次的循环
3. AJAX转Promise：jQuery的$.ajax本身就返回Promise对象，所以可以直接用map把每个id转换成对应的AJAX Promise

如果你需要处理单个请求的成功/失败状态，可以在map里的$.ajax后面加上.then()或.catch()，比如：

const ajaxPromises = batch.map(id => {
    return $.ajax({
        url: '/ajax.php',
        type: 'post',
        data: { id: id }
    }).then(response => {
        console.log(`id=${id}请求成功`, response);
        return response;
    }).catch(error => {
        console.error(`id=${id}请求失败`, error);
        // 如果想让失败不影响整个批次，可以返回一个默认值或者重新尝试
        return null;
    });
});

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