vue3+ts重复参数提取成方法多处调用以及字段无值时不传字段给后端问题
作者：性野喜悲
在进行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("暂无数据导出");
}
};只传有值的字段给后端
总结
具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教