vue 3中请求拦截器需手动实现空值与无效字段清洗：get/delete清洗config.params，post/put/patch清洗config.data，须用深克隆递归过滤并封装cleanemptyvalues函数。
Vue 3 中请求拦截器本身不负责“过滤空值与无效字段”，这是请求参数预处理环节，需在请求拦截器内部手动实现。关键在于：在 请求拦截器的 config 配置阶段 对 config.params（GET 查询参数）或 config.data（POST/PUT 请求体）进行深度清洗，而不是依赖后端或组件层临时处理。
清理请求参数中的空值和无效字段
常见无效字段包括：null、undefined、空字符串 ''、空数组 []、空对象 {}（视业务而定），以及某些特殊占位值如 'null' 字符串。清洗逻辑应递归、安全、可配置。
- 对
config.params（URL 查询参数）：直接遍历键值，删除空值项 - 对
config.data（请求体）：需深克隆后递归过滤，避免污染原始数据 - 推荐封装一个通用清洗函数，例如
cleanEmptyValues(obj)，支持选项（如是否剔除空数组、是否保留 0 或 false）
在请求拦截器中集成清洗逻辑
清洗必须放在请求拦截器的 use(config => {...}) 回调内，在 return config 前执行。注意区分请求方法：
- GET / DELETE 请求：清洗
config.params - POST / PUT / PATCH 请求：清洗
config.data；若使用application/x-www-form-urlencoded，还需用qs.stringify()处理后再清洗 - 避免清洗
config.headers或其他非业务字段
示例代码（含健壮清洗函数）
以下为生产可用片段（基于 Axios + Vue 3 Composition API 项目结构）：
import { cleanEmptyValues } from '@/utils/data'
// 请求拦截器
instance.interceptors.request.use(
(config) => {
// 仅对有数据的请求做清洗
if (config.params && Object.keys(config.params).length > 0) {
config.params = cleanEmptyValues(config.params)
}
if (config.data && typeof config.data === 'object') {
config.data = cleanEmptyValues(config.data)
}
return config
},
(error) => Promise.reject(error)
)
其中 cleanEmptyValues 可参考实现：
export function cleanEmptyValues(obj, options = { keepZero: false, keepFalse: false }) {
if (obj === null || obj === undefined) return undefined
if (typeof obj === 'string' && obj.trim() === '') return undefined
if (Array.isArray(obj) && obj.length === 0) return undefined
if (typeof obj === 'object' && Object.keys(obj).length === 0) return undefined
if (typeof obj === 'object') {
const cleaned = {}
for (const [key, value] of Object.entries(obj)) {
const cleanedValue = cleanEmptyValues(value, options)
if (cleanedValue !== undefined) {
cleaned[key] = cleanedValue
}
}
return Object.keys(cleaned).length ? cleaned : undefined
}
// 显式保留 0 和 false（除非配置禁止）
if (obj === 0 && !options.keepZero) return 0
if (obj === false && !options.keepFalse) return false
return obj
}
注意事项与边界情况
实际使用中容易忽略的细节：
- 表单提交时，用户未填的字段常被设为
undefined或空字符串，清洗后接口不会收到这些字段，后端需兼容（即字段非必传） - 若后端要求“显式传空字符串表示清空”，则不应过滤
''，需通过参数控制（如cleanEmptyValues(data, { skipEmptyString: true })） - 使用
FormData对象时，无法直接清洗 —— 应在构造FormData前完成字段过滤 - 不要在响应拦截器里做参数清洗，那是无效且违反职责分离原则的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
