React中并行执行Promise的最优方案：如何快速拉取卡片渲染所需数据

一、getCard 函数的核心优化 #

你当前的 getCard 写法中三个属性请求是串行执行的，总耗时为三个请求耗时之和，存在明显的优化空间：
三个getProperty请求互相独立，无需等待前一个返回再发起下一个，直接使用Promise.all并行触发即可，优化后单张卡片的总加载耗时仅等于最慢的单个请求耗时，性能提升非常明显。
如果业务允许部分属性加载失败仍渲染卡片，可将Promise.all替换为Promise.allSettled，自行处理失败属性的兜底展示逻辑。
优化后的代码示例：

async function getCard(i) {
  // 三个请求并行触发，大幅缩短单卡加载时间
  const [property1, property2, property3] = await Promise.all([
    getProperty1(i),
    getProperty2(i),
    getProperty3(i)
  ])

  return <div>
    <div>Property 1: {property1}</div>
    <div>Property 2: {property2}</div>
    <div>Property 3: {property3}</div>
  </div>
}

二、逐张渲染的实现方案 #

不需要等待全部卡片加载完成的场景下，无需使用Promise.allSettled等待所有请求返回，直接给每个卡片请求单独挂载回调，加载完成后立即更新对应位置的卡片状态即可：

• 初始化时先渲染10个加载占位组件，用户感知更流畅
• 每个卡片请求成功/失败后，只更新对应下标的卡片数据，实现加载完成一张就渲染一张
  实现代码示例：

function getCards() {
  // 初始化10个加载状态占位
  setCards(Array(10).fill({ status: 'loading' }))

  for (let i = 0; i < 10; i++) {
    // 独立处理每张卡片的请求
    getCard(i)
      .then(card => {
        setCards(prev => {
          const newCards = [...prev]
          newCards[i] = { status: 'fulfilled', value: card }
          return newCards
        })
      })
      .catch(err => {
        // 按需处理单张卡片加载失败的兜底逻辑
        setCards(prev => {
          const newCards = [...prev]
          newCards[i] = { status: 'rejected', reason: err }
          return newCards
        })
      })
  }
}

三、额外可选优化 #

• 如果后续卡片数量大幅增加，可添加简单的并发控制池，避免同一时间发起过多请求被浏览器同源请求数限制，反而拖慢整体加载速度
• 若后端支持批量查询接口，优先调用批量接口一次性拉取多张卡片的所有属性，减少HTTP握手开销，加载速度会比单张单属性发起请求更快

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