如何使用JavaScript实现多请求全部成功返回，解决Promise.all报错问题

问题根因 #

1. Promise.all参数不可迭代报错：你没有将所有fetch调用返回的Promise实例收集到数组中，传入Promise.all的参数不符合可迭代类型要求
2. 请求丢失的常见诱因：

• 原代码执行顺序错误：先启动所有异步请求，后清空结果容器results.innerHTML = ''，部分返回速度快的请求插入的结果会被后续的清空操作直接删除，产生请求丢失的错觉
• 缺少统一的请求异常兜底：单请求失败仅在控制台打印日志，页面无提示，看起来和没返回一致
• 没有对所有异步请求的执行状态做统一监听，无法判断是请求真的没返回还是执行中被终止

修复后代码 #

function requestToSend(nums_to_print) {
  const errorArray = [];
  // 参数校验不通过直接终止流程
  if (
    nums_to_print > 8 ||
    nums_to_print < 1 ||
    nums_to_print == '' ||
    nums_to_print == null
  ) {
    errorArray.push(
      'Entered lucky combinations ' +
        nums_to_print +
        ' cannot be greater than 8.'
    );
    errorToDisplay(errorArray);
    return;
  }

  const results = document.getElementById('results');
  // 先清空结果容器，避免覆盖先返回的请求内容
  results.innerHTML = '';
  // 收集所有请求Promise的数组
  const requestList = [];

  for (let i = 1; i <= nums_to_print; i++) {
    // 把每个fetch的Promise推入数组
    const req = fetch('generateNumbers.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        nums: nums_to_print,
      }),
    })
      .then((res) => res.json())
      .then((data) => {
        if (data?.error) {
          errorArray.push(data['error']);
          return;
        }
        if (data) {
          const str = document.createElement('p');
          // 原逻辑循环覆盖innerText，仅会展示最后一项数据，需要展示全部可改为拼接逻辑
          for (let y = 0; y < data.length; y++) {
            str.innerText = i + '. ' + data[y];
          }
          results.appendChild(str);
        }
      })
      .catch((error) => {
        console.error(`第${i}个请求失败:`, error);
        errorArray.push(`第${i}个请求发送失败，请重试`);
      });
    requestList.push(req);
  }

  // 用Promise.allSettled等待所有请求完成，无论成功失败都会执行后续逻辑，避免单请求失败终止整体流程
  Promise.allSettled(requestList).then(() => {
    // 所有请求结束后统一展示错误
    if (errorArray.length > 0) {
      errorToDisplay(errorArray);
    }
  });
}

核心修改点 #

• 调整执行顺序：参数校验不通过直接终止函数，先清空结果容器再启动批量请求，避免先返回的内容被误删
• 新增Promise数组收集所有请求实例，解决了Promise.all参数不可迭代的报错，使用allSettled替代all避免单请求失败打断整体流程
• 优化异常收集逻辑，所有请求的错误都会统一汇总到错误列表，最终统一展示，不会出现静默失败的情况
• 修复了原代码中参数校验不通过仍会执行后续逻辑的问题

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