vue3+ts重復參數提取成方法多處調用以及字段無值時不傳字段給后端問題
更新時間:2024年10月16日 08:53:14 作者:性野喜悲
在進行API開發(fā)時,優(yōu)化參數傳遞是一個重要的考量,傳統(tǒng)方法中,即使參數值為空,也會被包含在請求中發(fā)送給后端,這可能會導致不必要的數據處理,而優(yōu)化后的方法則只會傳遞那些實際有值的字段,從而提高數據傳輸的有效性和后端處理的效率
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 實現(xiàn)省市區(qū)街道4級聯(lián)動示例(仿淘寶京東收貨地址4級聯(lián)動)
本篇文章主要介紹了vue mint-ui 實現(xiàn)省市區(qū)街道4級聯(lián)動(仿淘寶京東收貨地址4級聯(lián)動),非常具有實用價值,需要的朋友可以參考下2017-10-10

