如何在所有AJAX POST请求完成后执行指定操作？

嘿，这个需求很典型，我来教你怎么实现～

你现在的代码是在嵌套循环里逐个发送$.post请求，但这些请求都是异步的，浏览器不会等它们全部完成才继续，所以直接在循环后面加alert的话，会立刻弹出，根本等不到请求结束。

核心思路：收集所有请求的Promise，统一等待完成 #

jQuery的$.post返回的是Deferred对象，它和标准的Promise兼容，所以我们可以把所有请求的Promise收集到一个数组里，然后用Promise.all()来等待所有请求完成后再执行alert。

具体代码实现 #

// 先创建一个数组来存放所有请求的Promise
const allRequests = [];

// 嵌套循环里，把每个post请求的Promise加入数组
for (let i = 0; i < n; i++) {
  for (let j = 0; j < m; j++) {
    // 注意这里用let声明i/j，避免作用域问题
    const request = $.post('/post', { 
      // 你的请求参数，比如可以带上i/j的值：i: i, j: j
    });
    allRequests.push(request);
  }
}

// 等待所有请求都成功完成
Promise.all(allRequests)
  .then(() => {
    alert('所有POST请求都成功完成啦！');
  })
  .catch((err) => {
    // 只要有一个请求失败，就会进入这里
    console.error('有请求失败了:', err);
    alert('部分请求失败，请查看控制台详情');
  });

补充：允许部分请求失败的场景 #

如果你的需求是不管请求成功还是失败，都要等所有请求都处理完再执行操作，那可以用Promise.allSettled()代替Promise.all()：

Promise.allSettled(allRequests)
  .then((results) => {
    // 可以遍历结果，统计成功/失败的数量
    const successCount = results.filter(res => res.status === 'fulfilled').length;
    const failCount = results.filter(res => res.status === 'rejected').length;
    
    console.log(`成功${successCount}个，失败${failCount}个`);
    alert('所有请求都已处理完毕！');
  });

小细节提醒 #

循环里的i和j一定要用let声明，别用var，不然会因为变量提升导致所有请求里的i/j都是最后一次循环的值，这是异步循环里很容易踩的坑哦～

内容的提问来源于stack exchange，提问作者Iván