vue3+ts重复参数提取成方法多处调用以及字段无值时不传字段给后端问题

 更新时间:2024年10月16日 08:53:14   作者:性野喜悲  
在进行API开发时,优化参数传递是一个重要的考量,传统方法中,即使参数值为空,也会被包含在请求中发送给后端,这可能会导致不必要的数据处理,而优化后的方法则只会传递那些实际有值的字段,从而提高数据传输的有效性和后端处理的效率

vue3+ts重复参数提取成方法多处调用以及字段无值时不传字段给后端

参数提取前的写法

此写法值为空的时候也会传空字段给后端

会把无值的空字段传给后端

修改后的写法

不会把没有值的字段传给后端

// 列表和导出需要传给后端的公共参数(加 || undefined即可过滤空字段)
const getCurentParam = () => {
  return {
    user_id: info.id || undefined,
    shop_id: state.shop_id || undefined,
    equipment_type: state.equipment_type || undefined,
    relate_type: state.relate_type || undefined,
    sdate: state.dateTime ? state.dateTime[0] : undefined,
    edate: state.dateTime ? state.dateTime[1] : undefined
  };
};
 
// 数据获取
const getTableData = async () => {
  state.loading = true;
  const { code, data, total } = (await xcx_user_sportlog({
    ...getCurentParam(),
    page: state.pageIndex,
    size: state.pageSize
  })) as HttpResponse;
  if (code == 200 && data) {
    let result = data || [];
    state.tableData = result;
    state.total = total;
    console.log("用户运动记录", result);
  }
  state.loading = false;
};
 
// 导出
const onExport = async () => {
  const res = (await export_sportlog(getCurentParam())) as HttpResponse;
  if (res.code == 200 && res?.url) {
    const link = document.createElement("a");
    link.href = res?.url;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } else {
    ElMessage.warning("暂无数据导出");
  }
};

只传有值的字段给后端

总结

具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

相关文章

  • Vue-Router实现组件间跳转的三种方法

    Vue-Router实现组件间跳转的三种方法

    这篇文章主要为大家详细介绍了Vue-Router来实现组件间跳转的三种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 基于ElementUI实现v-tooltip指令的示例代码

    基于ElementUI实现v-tooltip指令的示例代码

    文本溢出隐藏并使用tooltip 提示的需求,相信在平时的开发中会经常遇到,常规做法一般是使用 elementui 的 el-tooltip 组件,在每次组件更新的时候去获取元素的宽度/高度判断是否被隐藏,本文给大家介绍了基于ElementUI实现v-tooltip指令,需要的朋友可以参考下
    2024-09-09
  • Vue3 实现一个自定义toast 小弹窗功能

    Vue3 实现一个自定义toast 小弹窗功能

    这篇文章主要介绍了Vue3 实现一个自定义toast 小弹窗,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • Vue中进行路由懒加载的示例详解

    Vue中进行路由懒加载的示例详解

    路由懒加载是一种优化Vue应用程序性能的技术,本文介绍了Vue中如何进行路由懒加载,包括使用Vue异步组件和Webpack代码分割,需要的朋友可以参考下
    2023-06-06
  • vue调用本地缓存方式(监视数据变更)

    vue调用本地缓存方式(监视数据变更)

    这篇文章主要介绍了vue调用本地缓存方式(监视数据变更),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue3中ref绑定dom或者组件失败的原因及分析

    vue3中ref绑定dom或者组件失败的原因及分析

    这篇文章主要介绍了vue3中ref绑定dom或者组件失败的原因及分析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue3 watch和watchEffect的使用以及有哪些区别

    vue3 watch和watchEffect的使用以及有哪些区别

    这篇文章主要介绍了vue3 watch和watchEffect的使用以及有哪些区别,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • 详解基于element的区间选择组件校验(交易金额)

    详解基于element的区间选择组件校验(交易金额)

    这篇文章主要介绍了详解基于element的区间选择组件校验(交易金额),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Vue结合SignalR实现前后端实时消息同步

    Vue结合SignalR实现前后端实时消息同步

    这篇文章主要为大家详细介绍了Vue结合SignalR实现前后端实时消息同步,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • vue项目打包之后接口出现错误的问题及解决

    vue项目打包之后接口出现错误的问题及解决

    这篇文章主要介绍了vue项目打包之后接口出现错误的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论