从同一来源并行发起多个POST请求的问题

问题根源 #

你遇到的串行执行问题，大概率是前端代码用了串行的异步调用逻辑——比如在循环里逐个await请求，导致必须等上一个请求完成才会发起下一个：

// 错误写法：串行执行
async function sendRequests() {
  const data = { /* 你的请求数据 */ };
  for (let i = 0; i < 5; i++) {
    // 每一次请求都要等上一个完成才会触发
    const response = await fetch('/api/your-endpoint', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: { 'Content-Type': 'application/json' }
    });
    const result = await response.json();
    console.log(result);
  }
}

而刷新页面后两次点击的请求属于独立的页面会话，浏览器会直接并行发起，所以能达到你想要的效果。

解决方案：并行发起请求 #

核心思路是同时创建所有请求的Promise实例，再统一等待结果，以下是几种可行的实现方式：

方法1：用Promise.all批量处理（所有请求成功才返回，任一失败则整体抛出错误） #

async function sendParallelRequests() {
  const data = { /* 你的请求数据 */ };
  // 先生成所有请求的Promise数组
  const requestPromises = Array.from({ length: 5 }).map(() => 
    fetch('/api/your-endpoint', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: { 'Content-Type': 'application/json' }
    }).then(res => res.json())
  );

  // 等待所有请求完成
  const results = await Promise.all(requestPromises);
  results.forEach((result, index) => {
    console.log(`请求${index+1}结果:`, result);
  });
}

方法2：用Promise.allSettled（不管成功失败，都返回所有请求的结果） #

如果希望即使部分请求失败，也能获取其他成功请求的结果，用这个方法：

async function sendParallelRequests() {
  const data = { /* 你的请求数据 */ };
  const requestPromises = Array.from({ length: 5 }).map(() => 
    fetch('/api/your-endpoint', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: { 'Content-Type': 'application/json' }
    }).then(res => res.json())
  );

  const results = await Promise.allSettled(requestPromises);
  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`请求${index+1}成功:`, result.value);
    } else {
      console.error(`请求${index+1}失败:`, result.reason);
    }
  });
}

方法3：直接循环发起请求（无需等待全部完成，独立处理每个结果） #

如果不需要统一等待所有请求结束，可以直接在循环里发起请求，每个请求的结果单独处理：

function sendParallelRequests() {
  const data = { /* 你的请求数据 */ };
  for (let i = 0; i < 5; i++) {
    fetch('/api/your-endpoint', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: { 'Content-Type': 'application/json' }
    })
    .then(res => res.json())
    .then(result => console.log(`请求${i+1}结果:`, result))
    .catch(err => console.error(`请求${i+1}失败:`, err));
    // 这里不使用await，所有请求会立即发起
  }
}

额外注意：浏览器并发限制 #

浏览器对同一域名的并发请求数有默认限制（比如Chrome是6个），所以8个请求会分成两批：前6个并行执行，剩下2个会等前面有请求完成后再发起。这是浏览器的安全机制，无法完全绕过，但已经能最大化利用后端的并行处理能力，不会出现长时间无请求的情况。

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