React表格渲染时基于productHandle高效并行调用API的实现

问题背景 #

现有一个展示用户数据的表格组件，每条用户数据包含productHandle属性。需要基于该属性调用API获取对应的productTitle和productImage，并在表格中新增列展示这些信息。需要实现高效加载以避免过长等待时间，同时选择合适的Promise方案（new Promise()还是Promise.all）。

核心方案选择 #

优先使用Promise.all（或Promise.allSettled）而非单个new Promise()：

• 单个new Promise()只能串行发起请求，用户量越大，加载时间越长，完全不符合高效要求。
• Promise.all可以并行发起多个API请求，大幅缩短总加载时间；如果担心部分请求失败导致全部结果丢失，改用Promise.allSettled能保证成功的请求结果正常返回。
• 额外优化：先对productHandle去重，避免重复请求同一个产品数据，进一步减少请求数量和服务器压力。

实现示例（React） #

1. 组件状态与数据处理逻辑 #

import { useState, useEffect } from 'react';

const UserTable = ({ users }) => {
  // 状态管理：产品映射表、加载状态、错误信息
  const [productMap, setProductMap] = useState({});
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProductData = async () => {
      setLoading(true);
      setError(null);
      
      // 提取所有唯一的productHandle，过滤空值
      const uniqueHandles = [...new Set(users.map(user => user.productHandle).filter(Boolean))];
      
      if (uniqueHandles.length === 0) {
        setLoading(false);
        return;
      }

      try {
        // 批量发起并行请求，给单个请求添加容错处理
        const productPromises = uniqueHandles.map(handle => 
          fetch(`/api/products/${handle}`)
            .then(res => {
              if (!res.ok) throw new Error(`请求产品${handle}失败`);
              return res.json();
            })
            // 单个请求失败时返回默认值，不影响其他请求
            .catch(err => ({ handle, productTitle: '加载失败', productImage: '' }))
        );

        // 等待所有请求完成
        const products = await Promise.all(productPromises);
        
        // 构建产品映射表，方便表格渲染时快速查找
        const map = products.reduce((acc, product) => {
          acc[product.handle] = {
            title: product.productTitle,
            image: product.productImage
          };
          return acc;
        }, {});
        
        setProductMap(map);
      } catch (err) {
        setError('产品数据加载失败，请稍后重试');
      } finally {
        setLoading(false);
      }
    };

    fetchProductData();
  }, [users]);

  // 加载状态展示
  if (loading) return <div>加载中...</div>;
  // 错误状态展示
  if (error) return <div className="text-danger">{error}</div>;

  return (
    <table className="table table-striped table-bordered table-hover">
      <thead>
        <tr>
          <th>User Id</th>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
          <th>Phone</th>
          <th>Fax</th>
          <th>Address</th>
          {/* 新增产品相关列 */}
          <th>产品名称</th>
          <th>产品图片</th>
        </tr>
      </thead>
      <tbody>
        {users.map((user, index) => {
          // 从映射表中获取当前用户的产品信息，无数据时用默认值兜底
          const product = productMap[user.productHandle] || { title: '无产品信息', image: '' };
          return (
            <tr key={index}>
              <td>{user.userId}</td>
              <td>{user.firstname}</td>
              <td>{user.lastname}</td>
              <td>{user.email}</td>
              <td>{user.phone}</td>
              <td>{user.fax}</td>
              <td>{user.address}</td>
              <td>{product.title}</td>
              <td>
                {product.image ? (
                  <img src={product.image} alt={product.title} style={{ width: '50px', height: '50px', objectFit: 'cover' }} />
                ) : '无图片'}
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export default UserTable;

2. 关键优化点说明 #

• 去重处理：通过new Set提取唯一的productHandle，避免重复请求同一个产品数据，减少请求量。
• 并行请求：用Promise.all同时发起所有产品请求，总耗时等于最慢的那个请求时间，远快于串行请求。
• 容错处理：给单个请求添加catch，返回默认值，确保某一个产品请求失败不会导致整个表格数据无法展示；也可根据需求改用Promise.allSettled来单独处理每个请求的成功/失败状态。
• 状态反馈：通过loading和error状态给用户明确的加载反馈，提升页面体验。

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