React JS使用AXIOS调用API时如何更优传递可选参数？

你当前的代码冗余核心来自于对每个可选参数的组合做分支判断，以及重复写完全相同的固定配置参数，可以按以下方式优化： #

优化后代码 #

const axiosHandler = async () => {
  // 动态构造第一个参数，仅真值属性会被保留
  const reqParams = {
    ...(productID && { productID }),
    ...(type && { type })
    // 后续新增可选参数只需要在这里加一行即可，不需要加if分支
  }
  // 提取固定的配置参数，只写一次
  const reqConfig = {
    assignedTo: popUpID.current.toString(),
    selectedItems: checkedItems
  }
  // 仅一次分支判断，根据参数是否为空决定调用方法
  let request
  if (Object.keys(reqParams).length) {
    request = common.fetchDetails(reqParams, reqConfig)
  } else {
    request = common.fetchDetailsWithoutParams(reqConfig)
  }
  // 用async/await简化then链，写法更直观
  try {
    const res = await request
    console.log('res', res)
  } catch (err) {
    console.log('err', err)
  }
}

优化说明 #

• 动态构造参数的逻辑支持任意数量的可选参数，新增参数时不需要额外增加if分支，完全避免参数组合爆炸导致的代码冗长
• 固定配置参数只定义一次，后续修改配置只需要改一处，不会出现多分支修改遗漏的问题
• 如果你可以修改common层的封装逻辑，更推荐把fetchDetails和fetchDetailsWithoutParams合并为一个方法，内部判断第一个参数是否为空做兼容处理，调用侧就不需要再做分支判断，代码可以进一步简化为：

// common层调整后的调用代码
const axiosHandler = async () => {
  const reqParams = {
    ...(productID && { productID }),
    ...(type && { type })
  }
  const reqConfig = {
    assignedTo: popUpID.current.toString(),
    selectedItems: checkedItems
  }
  try {
    const res = await common.fetchDetails(reqParams, reqConfig)
    console.log('res', res)
  } catch (err) {
    console.log('err', err)
  }
}

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