React Native中如何使用forEach等方法遍历参数拉取接口数据？

• 先明确两个遍历维度的数据源：即所有需要请求的分类ID列表、每个分类下需要拉取的分页页码列表。
• 不推荐直接使用forEach发起异步请求：forEach不会等待异步任务执行，也无法直接收集请求返回的Promise实例，会导致无法准确判断全量请求完成时机、结果收集混乱、错误难以捕获的问题。
• 优先使用flatMap+map生成所有维度组合对应的请求Promise任务，配合Promise.all并发执行，同时给单个请求加错误兜底，避免单请求失败中断整个批量流程。
• 如果请求总数过大，增加分批并发控制逻辑，避免短时间请求过多触发接口限流或端侧超时。

以下示例兼容React Native内置的fetch请求，如果你使用axios等第三方请求库，替换对应请求逻辑即可：

// 基础配置
const BASE_API = 'https://xxx.com/services/videos';
// 替换为你实际需要请求的分类ID集合
const categoryList = [1, 2, 5, 12, 125];
// 生成需要拉取的页码列表，示例为0-6页，替换为实际分页范围即可
const pageList = Array.from({ length: 7 }, (_, index) => index);

/**
 * 单个分类+单页的请求方法，自带错误兜底
 */
const fetchSingleVideoList = async (categoryId, pageNum) => {
  const requestUrl = `${BASE_API}/${categoryId}/${pageNum}`;
  try {
    const response = await fetch(requestUrl);
    if (!response.ok) throw new Error(`HTTP错误 状态码${response.status}`);
    const responseData = await response.json();
    return {
      categoryId,
      pageNum,
      data: responseData,
      success: true
    };
  } catch (error) {
    // 单请求失败不中断整体流程，标记失败状态即可
    return {
      categoryId,
      pageNum,
      errorMsg: error.message,
      success: false
    };
  }
};

/**
 * 批量拉取全部分类、全部分页数据
 */
const fetchAllVideoData = async () => {
  // 双层遍历生成所有请求任务
  const allRequestTasks = categoryList.flatMap(categoryId => {
    return pageList.map(pageNum => fetchSingleVideoList(categoryId, pageNum));
  });

  // 等待所有请求完成
  const allResults = await Promise.all(allRequestTasks);

  // 分离成功、失败的请求结果
  const successResults = allResults.filter(item => item.success);
  const failedResults = allResults.filter(item => !item.success);
  console.log(`请求成功${successResults.length}个，失败${failedResults.length}个`, failedResults);

  // 按分类ID聚合整理数据，方便后续使用
  const formattedData = successResults.reduce((dataMap, currentItem) => {
    if (!dataMap[currentItem.categoryId]) dataMap[currentItem.categoryId] = {};
    dataMap[currentItem.categoryId][currentItem.pageNum] = currentItem.data;
    return dataMap;
  }, {});

  return formattedData;
};

// 组件内调用示例（React Hooks）
// import { useEffect, useState } from 'react';
// const [videoData, setVideoData] = useState({});
// useEffect(() => {
//   fetchAllVideoData().then(res => setVideoData(res));
// }, []);

关于forEach的说明 #

如果你一定要使用forEach实现，需要手动维护请求完成计数，逻辑冗余且容易出现边界问题，仅作示例不推荐生产环境使用：

const fetchDataWithForEach = (callback) => {
  const result = [];
  let finishedCount = 0;
  const totalTaskCount = categoryList.length * pageList.length;

  categoryList.forEach(categoryId => {
    pageList.forEach(pageNum => {
      fetch(`${BASE_API}/${categoryId}/${pageNum}`)
        .then(res => res.json())
        .then(data => {
          result.push({ categoryId, pageNum, data });
        })
        .catch(err => console.log(`分类${categoryId}第${pageNum}页请求失败`, err))
        .finally(() => {
          finishedCount++;
          // 所有请求完成后执行回调
          if (finishedCount === totalTaskCount) callback(result);
        });
    });
  });
};

• 当总请求数超过20个时，不要直接用Promise.all全量并发，建议增加分批逻辑，比如每批并发5个请求，上一批完成后再发下一批，避免触发接口限流。
• 所有批量请求必须给单个请求加错误捕获，不要让单接口异常导致整个批量任务直接失败。
• 如果不需要一次性拉取全部分类的所有分页数据，建议改为滚动加载逻辑，即用户滑到对应分类、对应页码时再发请求，减少无效流量消耗。

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