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("暂无数据导出");
}
};只传有值的字段给后端

总结
具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
相关文章
uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法
这篇文章主要介绍了uniapp组件uni-file-picker中设置使用照相机和相册的权限,在uniapp中,我们通常会使用uni-file-picker这个组件,但是这个组件中,有点缺陷,就是没有对这个功能的传值设置,这里就要给组件进行修改了,需要的朋友可以参考下2022-11-11
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
本篇文章主要介绍了vue mint-ui 实现省市区街道4级联动(仿淘宝京东收货地址4级联动),非常具有实用价值,需要的朋友可以参考下2017-10-10


最新评论