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项目npm操作npm run serve或npm run dev报错及二者的区别

    Vue项目npm操作npm run serve或npm run dev报错及二者

    这篇文章主要介绍了Vue项目npm操作npm run serve或npm run dev报错及二者的区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 关于vue3 vuex4 store的响应式取值问题解决

    关于vue3 vuex4 store的响应式取值问题解决

    这篇文章主要介绍了vue3 vuex4 store的响应式取值问题,在实际生活中遇到这样一个问题:在页面中点击按钮,数量增加,值是存在store中的,点击事件值没变,如何解决这个问题,本文给大家分享解决方法,需要的朋友可以参考下
    2022-08-08
  • element ui table 增加筛选的方法示例

    element ui table 增加筛选的方法示例

    这篇文章主要介绍了element ui table 增加筛选的方法示例,详细的介绍了如何添加规则内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • vue components 动态组件详解

    vue components 动态组件详解

    这篇文章主要介绍了vue components 动态组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • vue实现消息的无缝滚动效果的示例代码

    vue实现消息的无缝滚动效果的示例代码

    本篇文章主要介绍了vue实现消息的无缝滚动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue前端框架vueuse的useScroll函数使用源码分析

    vue前端框架vueuse的useScroll函数使用源码分析

    这篇文章主要为大家介绍了vueuse的useScroll函数源码分析详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Vue3+JS高级前端面试题及答案总结大全

    Vue3+JS高级前端面试题及答案总结大全

    这篇文章主要介绍了Vue3+JS高级前端面试题及答案总结的相关资料,在实际项目中,能运用这些技能高效开发前端页面,优化用户体验,对Vue的生态系统也有一定了解,需要的朋友可以参考下
    2025-12-12
  • Vue实现路由跳转和嵌套

    Vue实现路由跳转和嵌套

    本篇文章主要介绍了Vue实现路由跳转和嵌套,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Vue切换组件实现返回后不重置数据,保留历史设置操作

    Vue切换组件实现返回后不重置数据,保留历史设置操作

    这篇文章主要介绍了Vue切换组件实现返回后不重置数据,保留历史设置操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 教你在vue项目中使用svg图标的方法

    教你在vue项目中使用svg图标的方法

    本文给大家介绍了在vue项目中使用svg图标的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2022-04-04

最新评论