去除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);
    }
};