Vue 3 中 Axios 请求拦截器通过递归 cleanEmpty 函数自动过滤空字段：GET 清理 config.params，POST/PUT 清理 config.data（跳过 FormData），x-www-form-urlencoded 则清理后 qs.stringify；需区分业务必传与可选字段，避免误删 page=0 等有效值。
在 Vue 3 项目中，使用 Axios 请求拦截器自动过滤空字符串字段（包括 null、undefined、''），关键是在请求发出前对 config.data 或 config.params 做深层清洗，而不是只处理表单输入层。
识别要清理的数据源
不同请求方式携带数据的位置不同，需分别判断：
-
POST/PUT 请求体（JSON）：数据在
config.data中，通常是 JS 对象或 FormData -
GET 请求参数：数据在
config.params中 -
URL 编码提交（x-www-form-urlencoded）：可能在
config.data，且需用qs.stringify()序列化前清理
用递归函数安全剔除空值字段
避免浅层过滤漏掉嵌套对象里的空字段。推荐封装一个通用清理函数：
const cleanEmpty = (obj) => {
if (obj === null || obj === undefined || obj === '') return undefined
if (typeof obj === 'object') {
const cleaned = {}
Object.keys(obj).forEach(key => {
const val = cleanEmpty(obj[key])
if (val !== undefined) cleaned[key] = val
})
return Object.keys(cleaned).length ? cleaned : undefined
}
return obj
}
这个函数会递归遍历对象，跳过所有空值键，且不修改原对象。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
在请求拦截器中调用清理逻辑
在 src/utils/request.js 的请求拦截器里插入处理：
http.interceptors.request.use(config => {
// 清理 GET 参数
if (config.params) {
config.params = cleanEmpty(config.params)
}
// 清理 POST/PUT 请求体（仅处理普通对象，跳过 FormData / Blob）
if (config.data && typeof config.data === 'object' && !(config.data instanceof FormData)) {
config.data = cleanEmpty(config.data)
}
// 若 Content-Type 是 x-www-form-urlencoded，确保序列化前已清理
if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
config.data = qs.stringify(cleanEmpty(config.data))
}
return config
})
注意边界情况
有些字段虽为空但业务上不允许省略（如分页的 page=0、布尔值 enabled=false），所以清理逻辑不能一刀切。建议：
- 只对明确允许“缺失即忽略”的字段做清理（比如搜索关键词、备注、可选筛选项）
- 必要字段保留原始值，可在接口文档中标注“空字符串视为未传”
- 若后端依赖字段存在性判断，前端应改用显式标记（如
filter: { name: null }表示“不按 name 过滤”）
这样处理后，请求体更干净，后端无需反复校验空字段，也减少无效查询和日志噪音。
