如何用JS/ES6的for循环生成可被Promise.all处理的fetch Promise数组？

嘿，这个场景我太熟悉了！之前对接分页API的时候经常遇到这种情况，咱们一步步来搞定它：

要生成能被Promise.all处理的fetch Promise数组，关键是先确定需要发起多少次请求，再用for循环逐个创建对应的fetch请求Promise，最后把这些Promise收集到数组里交给Promise.all统一处理。

步骤1：先获取总数据量（API返回总数的情况） #

大部分分页API会返回总数据条数，咱们可以先发起一次请求拿到总数，然后计算需要多少页（每页100条），这样就能确定循环的次数。

步骤2：用for循环生成Promise数组 #

知道总页数后，直接用for循环遍历每一页，为每一页创建一个fetch请求，把这些请求的Promise存入数组即可。

async function fetchAllApiData() {
  const itemsPerPage = 100;
  let totalItems = 0;

  try {
    // 第一步：获取总数据量（假设API返回的结构包含total字段）
    const initialRes = await fetch('https://your-api-url.com/data?limit=1');
    if (!initialRes.ok) throw new Error(`初始化请求失败: ${initialRes.status}`);
    
    const initialData = await initialRes.json();
    totalItems = initialData.total;
    const totalPages = Math.ceil(totalItems / itemsPerPage);

    // 第二步：用for循环生成所有fetch请求的Promise数组
    const fetchPromises = [];
    for (let page = 0; page < totalPages; page++) {
      // 根据API的分页规则调整参数，有的用page，有的用offset
      const requestUrl = `https://your-api-url.com/data?limit=${itemsPerPage}&offset=${page * itemsPerPage}`;
      
      // 把每个fetch请求（包含错误处理和json解析）加入数组
      const pagePromise = fetch(requestUrl)
        .then(res => {
          if (!res.ok) throw new Error(`第${page+1}页请求失败: ${res.status}`);
          return res.json();
        })
        .then(pageData => pageData.items); // 假设每页数据存在items字段里

      fetchPromises.push(pagePromise);
    }

    // 第三步：用Promise.all等待所有请求完成，合并结果
    const allPageData = await Promise.all(fetchPromises);
    const fullData = allPageData.flat(); // 把分页数组合并成一个大数组
    console.log('获取到全部数据:', fullData);
    return fullData;
  } catch (err) {
    console.error('获取数据出错:', err);
    throw err;
  }
}

// 调用函数
fetchAllApiData();

如果API没返回总条数，咱们可以循环请求直到返回的结果少于100条，再把所有请求的Promise收集起来（或者先串行判断页数再并行请求）：

async function fetchAllDataWithoutTotal() {
  const itemsPerPage = 100;
  let offset = 0;
  const requiredOffsets = [];

  try {
    // 先串行请求判断需要多少个offset
    while (true) {
      const res = await fetch(`https://your-api-url.com/data?limit=${itemsPerPage}&offset=${offset}`);
      if (!res.ok) throw new Error(`判断页数请求失败: ${res.status}`);
      
      const pageData = await res.json();
      requiredOffsets.push(offset);
      
      // 如果当前页数据少于100条，说明已经到最后一页了
      if (pageData.items.length < itemsPerPage) break;
      offset += itemsPerPage;
    }

    // 用for循环生成并行请求的Promise数组
    const fetchPromises = [];
    for (const currentOffset of requiredOffsets) {
      const requestUrl = `https://your-api-url.com/data?limit=${itemsPerPage}&offset=${currentOffset}`;
      const pagePromise = fetch(requestUrl)
        .then(res => {
          if (!res.ok) throw new Error(`请求offset=${currentOffset}失败: ${res.status}`);
          return res.json();
        })
        .then(data => data.items);
      
      fetchPromises.push(pagePromise);
    }

    const allPageData = await Promise.all(fetchPromises);
    return allPageData.flat();
  } catch (err) {
    console.error('出错了:', err);
    throw err;
  }
}

• 每个fetch请求要做好错误处理，不然单个请求失败会导致整个Promise.all失败；如果想允许部分失败，可以改用Promise.allSettled。
• 要根据API实际的分页参数调整（比如有的用page和size，有的用skip和take），别硬套示例里的参数。
• 如果API有请求频率限制，别一次性发起太多并行请求，可以考虑分批处理（比如每5个请求一组，完成后再发起下一组）。

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