JavaScript如何处理复选框组多选值并适配Axios调用.Net API逻辑

原有代码使用if-else if互斥判断逻辑，天生只支持单选场景，多选时只会触发第一个匹配到的条件，无法满足需求。可以根据是否能调整后端API接口，选择以下两种改造方案：

方案1：调整后端API（推荐） #

这是长期可维护性最高的方案，改造步骤如下：

• 后端.NET新增统一查询接口，例如路由为api/tags/GetByTypes，支持接收字符串数组类型的types参数，参数可选值为New/Regulars/Veterans，接口内部根据传入的类型列表返回对应结果，未传参数时返回全部数据。
• 前端逻辑改造：

const fetchGamerTags = async (showNew, showRegulars, showVeterans) => {
  // 收集选中的类型列表
  const selectedTypes = []
  if (showNew) selectedTypes.push('New')
  if (showRegulars) selectedTypes.push('Regulars')
  if (showVeterans) selectedTypes.push('Veterans')

  const result = await axios('api/tags/GetByTypes', {
    params: {
      isDeleted: false,
      types: selectedTypes
    },
    // 如果后端接口要求数组参数格式为逗号分隔，可以加以下配置
    // paramsSerializer: params => qs.stringify(params, { arrayFormat: 'comma' })
  });
  return result.data
}

如果后端要求数组参数用特殊序列化格式，可以引入qs库处理参数序列化规则即可。

方案2：不改动现有后端接口 #

如果暂时无法调整后端接口，可以前端并行请求多个选中分类的接口，再合并返回结果：

const fetchGamerTags = async (showNew, showRegulars, showVeterans) => {
  // 收集需要请求的接口地址
  const requestList = []
  if (showNew) requestList.push(axios('api/tags/GetNew/', { params: { isDeleted: false } }))
  if (showRegulars) requestList.push(axios('api/tags/GetRegulars/', { params: { isDeleted: false } }))
  if (showVeterans) requestList.push(axios('api/tags/GetVeterans/', { params: { isDeleted: false } }))

  // 未选中任何分类时请求全量接口
  if (requestList.length === 0) {
    requestList.push(axios('api/tags/GetAll/', { params: { isDeleted: false } }))
  }

  // 并行请求所有接口
  const resultList = await Promise.all(requestList)
  // 合并结果并根据唯一ID去重（避免存在同时属于多个分类的重复数据）
  const mergedData = [...new Map(
    resultList.flatMap(res => res.data.map(item => [item.id, item]))
  ).values()]
  return mergedData
}

注意：该方案会在多选时产生多笔网络请求，性能略低于方案1，仅适合临时过渡使用。

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