将多异步请求改为单请求：通过'id:in'批量查询分类数据求助

原问题分析 #

当前代码通过遍历categoryFilter数组，为每个分类ID单独发起请求，会产生10次HTTP请求，效率较低。需要改为通过id:in参数一次性请求所有目标分类，减少请求次数。

修改后的代码实现 #

const allCategory = ref([]); // 改为响应式变量，确保数据变化能触发视图更新
if (Array.isArray(categoryTreeItems.value)) {
  const categoryFilter = [3338, 4775, 3411, 3995, 3949, 2934, 3071, 3462, 3629, 5239];
  const { category: categoryData, search: searchCategoriesData } = useCategory('category-data-search');
  
  // 发起单个批量请求，用id:in参数传递所有分类ID
  await searchCategoriesData({ 'id:in': categoryFilter });
  
  // 过滤出带有有效image_url的分类项，赋值给响应式变量
  allCategory.value = categoryData.value.filter(item => item.image_url?.length > 0);
}

关键修改点说明 #

• 响应式修正：原代码中allCategory是普通数组，无法触发Vue视图更新，改为ref([])后能保证数据变化时渲染组件自动更新。
• 批量参数传递：将categoryFilter数组作为id:in参数的值传递，若后端要求参数为逗号分隔的字符串，可改为categoryFilter.join(',')。
• 结果处理优化：直接对批量返回的数据进行过滤，替代循环中逐个判断的逻辑，代码更简洁高效。

渲染代码适配 #

你提供的渲染代码无需修改，allCategory仍为数组结构，v-for遍历及后续交互逻辑完全兼容。

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