AJAX|异步请求：前端实现批量发送多个ajax请求的方法与实践

🔥 AJAX | 异步请求：前端实现批量发送多个ajax请求的方法与实践

📢 最新动态（2025年7月）
随着Web应用复杂度的提升，前端对高效并发请求的需求越来越高，最新Chrome浏览器优化了Promise.allSettled()的性能，使得批量处理异步请求更加流畅！🚀

1️⃣ 为什么需要批量发送AJAX请求？

在电商、数据分析等场景中，我们经常需要同时获取多个接口的数据。

• 用户进入首页时,需加载用户信息、商品列表、
• 提交表单时,需并行校验多个字段的合法性

如果逐个发送请求,会导致页面加载慢、用户体验差！😫

2️⃣ 方法一：Promise.all（全成功才返回）

const request1 = fetch('/api/user');
const request2 = fetch('/api/products');
const request3 = fetch('/api/recommend');
Promise.all([request1, request2, request3])
  .then(responses => {
    console.log('所有请求成功！', responses);
  })
  .catch(error => {
    console.error('有一个请求失败啦！', error); // 任意失败即触发
  });

适用场景：需要所有请求都成功才能继续操作（如支付流程）

3️⃣ 方法二：Promise.allSettled（无论成败都返回）

const requests = [
  fetch('/api/comments'),
  fetch('/api/ratings'),
  fetch('/api/invalid-url') // 假设这个会失败
];
Promise.allSettled(requests)
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log('成功数据：', result.value);
      } else {
        console.warn('失败原因：', result.reason); // 不会阻断其他请求
      }
    });
  });

适用场景：需要统计所有请求结果（如批量导出数据）

4️⃣ 方法三：手动控制并发数（避免服务器压力）

async function batchRequests(urls, maxConcurrent = 3) {
  const results = [];
  for (let i = 0; i < urls.length; i += maxConcurrent) {
    const batch = urls.slice(i, i + maxConcurrent);
    const batchResults = await Promise.allSettled(batch.map(url => fetch(url)));
    results.push(...batchResults);
    console.log(`已完成批次 ${i/maxConcurrent + 1} 🎯`);
  }
  return results;
}
// 使用示例
const urls = ['/api/data1', '/api/data2', ..., '/api/data10'];
batchRequests(urls, 2); // 每次最多2个并发

5️⃣ 实战技巧与避坑指南

✅ 错误处理：为每个请求添加.catch，避免单个失败导致页面卡死
✅ 取消请求：使用AbortController可中途取消批量请求
❌ 避免嵌套：不要在一个请求回调里发起下一个请求（会变成串行！）
💡 性能优化：对于大数据量请求，考虑服务端合并接口

批量处理AJAX请求能显著提升页面性能！根据场景选择：

• Promise.all → 强依赖所有结果的场景
• Promise.allSettled → 允许部分失败的场景
• 手动分批次 → 需要控制并发数的场景

现在就去优化你的代码吧！✨ 2025年的用户可不会容忍慢吞吞的网页哦~