去除param参数中的 null 和 undefined，过滤后给后端进行传参

去除param参数中的 null 和 undefined，过滤后给后端进行传参

效果

1、封装方法

src/utils/transformDataNull.ts

/ * 去除数据中的 null 和 undefined * @param data */ import deepClone from '@/utils/clone'; export default (data: Object) => { 
    if (data instanceof FormData) { 
    return data; } const transformData = deepClone(data); if (typeof transformData === 'object' && transformData !== null) { 
    for (const [k, v] of Object.entries(transformData)) { 
    if (v === null || v === undefined) { 
    delete transformData[k]; } } } return transformData; }; 

2、axios请求拦截中进行配置

src/axios/index.ts

 import transformDataNull from '@/utils/transformDataNull'; / * 设置请求拦截器 * @param service */ function useRequestInterceptors(service: AxiosInstance) { 
    // 请求拦截器 service.interceptors.request.use( config => { 
    // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了 // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 if ( !config.headers['Content-Type'] && !(config.data instanceof FormData) ) { 
    config.headers['Content-Type'] = 'application/json'; } if (getToken()) { 
    config.headers.token = getToken(); } // 转化参数：删除 null 和undefined_________________________________ config.params = transformDataNull(config.params); config.data = transformDataNull(config.data); // 全局loading showLoading(config); / 定时任务，15分钟没有掉接口，退出 */ return config; }, error => { 
    return Promise.reject(error); } ); return service; } 

3、页面使用

index.vue

// 定义方法 const funcList = { 
    //查看角色和菜单详情 getRoleMenuListByRoleId() { 
    const params = { 
    roleId: route.query.id, desc: state.auditForm.desc }; //方式一 主要看params传参对象新增参数和赋值的写法_____________ params['remindNo'] = fillFormData.remindNo; if(params.roleId===1){ 
    // 如果 通知频次为天时 截止推送时间默认为null 主要看赋值为null的情况 params['remindTimeEnd'] = null; } Amend_fill_warn(params).then(({ 
     code }) => { 
    if (code === 200) { 
    ElMessage.success('修改成功！'); state.dialogVisible = false; if(state.fillFormData.roleId==1){ 
    state.fillFormData.remindTimeEnd = null; } methods.inquire(); } state.saveBtnDisabled=false }); // 方式二 主要看-传参id的写法方式____________________ RoleMenu.getRoleMenuListByRoleId(route.query.id).then(res => { 
    data.tableData = res.data.roleMenuList; data.auditForm.roleName = res.data.roleName; data.auditForm.roleDesc = res.data.roleDesc; }); }, handleCan() { 
    funcList.goBack(); }, goBack() { 
    router.go(-1); } }; 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qkl-jr/10880.html