如何为每个Category对象加载对应SubCategories并添加至类别数组？

我来帮你搞定这个需求！要给每个主类别加载对应的子类别并关联到类别数组里，有两种常用的方式——并行请求（效率更高）和串行请求（适合有接口并发限制的场景），下面分别给你详细说明：

方法一：并行请求（推荐，效率更高） #

利用Promise.all()可以同时发起所有子类别请求，等全部请求完成后再把结果关联到对应的主类别上，这样比逐个请求快很多。

完整代码示例 #

// 保留你原有的两个请求函数（可以优化路径，后面会说明）
const getCategories = async () => {
  const { data: categories } = await axios.get(`api/Categories/GetCategories`);
  return categories;
};

const getSubCategories = async catId => {
  const { data: subCategories } = await axios.get(`../api/SubCategories/GetSubCategories?catId=${catId}`);
  return subCategories;
};

// 新增处理关联的核心函数
const getCategoriesWithSubCategories = async () => {
  try {
    // 第一步：获取所有主类别
    const categories = await getCategories();
    
    // 第二步：并行发起所有子类别请求，关联到对应主类别
    await Promise.all(categories.map(async (category) => {
      // 这里要确保category对象有正确的id字段（比如后端返回的是id/categoryId，根据实际情况调整）
      const subCategories = await getSubCategories(category.id);
      // 给主类别添加subCategories属性，把子类别集合存进去
      category.subCategories = subCategories;
    }));
    
    // 返回处理后的类别数组，每个类别都携带自己的子类别
    return categories;
  } catch (error) {
    console.error('加载类别或子类别时出错:', error);
    // 可根据业务需求调整错误处理逻辑，比如返回空数组或抛出错误让上层处理
    throw error;
  }
};

关键细节说明 #

• 如果担心个别子类别请求失败影响整体，可以给每个子请求单独加try/catch：

  await Promise.all(categories.map(async (category) => {
    try {
      category.subCategories = await getSubCategories(category.id);
    } catch (subError) {
      console.error(`加载类别${category.id}的子类别失败:`, subError);
      category.subCategories = []; // 失败时设置为空数组，避免后续逻辑报错
    }
  }));
  

• 注意getSubCategories里的../api相对路径，可能会因页面路由变化导致请求路径错误，建议给axios配置统一的baseURL：

  // 全局配置axios基础路径，避免相对路径问题
  axios.defaults.baseURL = '/api';
  
  // 简化后的请求函数
  const getCategories = async () => {
    const { data: categories } = await axios.get('/Categories/GetCategories');
    return categories;
  };
  
  const getSubCategories = async catId => {
    const { data: subCategories } = await axios.get(`/SubCategories/GetSubCategories?catId=${catId}`);
    return subCategories;
  };
  

方法二：串行请求（适合接口有并发限制的场景） #

如果后端接口限制了并发请求数量，用for...of循环逐个请求子类别，能避免一次性发起过多请求触发限制：

代码示例 #

const getCategoriesWithSubCategories = async () => {
  try {
    const categories = await getCategories();
    
    // 逐个遍历主类别，串行请求子类别
    for (const category of categories) {
      try {
        category.subCategories = await getSubCategories(category.id);
      } catch (subError) {
        console.error(`加载类别${category.id}的子类别失败:`, subError);
        category.subCategories = [];
      }
    }
    
    return categories;
  } catch (error) {
    console.error('加载主类别失败:', error);
    throw error;
  }
};

关键说明 #

这种方式请求速度会慢一些，但能严格控制请求频率，适合对并发数有要求的场景。

最后再提醒一句：要确保传递给getSubCategories的catId是主类别对象里的正确字段，比如如果后端返回的主类别里是categoryId而不是id，记得把category.id改成category.categoryId哦！

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