React中如何实现列表项API请求并行？是否有Promise.all替代方案？

最优实现方案 #

当前代码让每个Item组件单独发起API请求，虽然浏览器会自动并行处理部分请求，但这种方式不利于统一控制（比如加载状态、错误处理、并发数限制），最优的做法是在父组件ItemList中统一批量发起并行请求，再将数据传递给子组件：

1. 在ItemList中，基于itemIds生成请求Promise数组：

// 假设你的API请求函数是fetchItemById
const fetchPromises = itemIds.map(id => fetchItemById(id));

2. 使用Promise.all()或Promise.allSettled()处理并行请求：

• 如果要求所有请求都成功才渲染数据，用Promise.all()：

try {
  const itemDataList = await Promise.all(fetchPromises);
  // 将结果转为id-数据的映射，方便子组件获取
  const itemDataMap = itemDataList.reduce((map, data) => {
    map[data.id] = data;
    return map;
  }, {});
  // 渲染Item时传入对应数据
  return itemIds.map(id => <Item key={id} data={itemDataMap[id]} />);
} catch (error) {
  // 处理任意请求失败的情况
  return <div>加载失败</div>;
}

• 如果允许部分请求失败，其他成功数据正常渲染，用Promise.allSettled()：

const results = await Promise.allSettled(fetchPromises);
const itemDataMap = {};
results.forEach((result, index) => {
  const id = itemIds[index];
  if (result.status === 'fulfilled') {
    itemDataMap[id] = result.value;
  } else {
    // 处理单个请求失败的情况，比如标记为空或错误状态
    itemDataMap[id] = null;
  }
});
return itemIds.map(id => <Item key={id} data={itemDataMap[id]} />);

是否必须使用Promise.all()或Promise.allSettled()？ #

不是必须的，但它们是浏览器原生支持的标准方案，代码简洁、可读性高，能直接满足绝大多数并行请求场景的需求，没必要自己手动实现类似逻辑。

替代方案 #

1. 第三方库封装：比如axios.all()（内部封装了Promise.all()）、RxJS的forkJoin（适合需要结合流处理的复杂场景，比如请求之间有依赖或需要中途取消的情况）。
2. 自定义并发控制函数：如果需要限制同时发起的请求数量（避免触发接口限流），可以自己实现一个队列式的并发控制工具，比如：

async function fetchWithConcurrency(itemIds, concurrency = 5) {
  const results = [];
  let index = 0;
  async function fetchBatch() {
    if (index >= itemIds.length) return;
    const id = itemIds[index++];
    try {
      const data = await fetchItemById(id);
      results.push({ id, data, status: 'fulfilled' });
    } catch (err) {
      results.push({ id, status: 'rejected', error: err });
    }
    await fetchBatch();
  }
  // 同时启动指定数量的请求
  await Promise.all(Array(concurrency).fill().map(fetchBatch));
  return results;
}

3. 手动管理Promise数组：逐个创建Promise并监听状态，手动收集结果，但这种方式本质上和Promise.all()逻辑一致，属于重复造轮子，不推荐。

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