Vue 3中请求拦截器不负责过滤null字段，该行为发生在Axios参数序列化阶段；推荐在API调用前用cleanParams函数预处理参数，而非在拦截器中修复。
Vue 3 中请求拦截器本身不负责过滤 null 字段，这个过滤行为发生在 Axios 内部的参数序列化阶段，与拦截器无关。但你可以通过配置或封装手段，在请求发出前“绕过默认过滤”或“主动清理”，实现你想要的效果。
关键要分清两点：
- Axios 默认会静默丢弃
params中值为null或undefined的键（只保留空字符串''）； - 请求拦截器运行时，
config.params已经被序列化处理过了（对 GET 请求），或者还没到序列化环节（对 POST 请求的data则另说）。
所以，真正可控、可干预的位置是：在调用 axios.get() 或 axios.post() 之前，手动预处理参数对象。
✅ 推荐做法：封装一个安全的参数清理函数
在 src/utils/request.ts 或工具文件中添加：
立即学习“前端免费学习笔记（深入）”；
// 过滤掉 null 和 undefined，但保留 ''、0、false 等有效假值
export function cleanParams<T extends Record<string, any>>(params: T): Partial<T> {
const cleaned: Partial<T> = {}
for (const [key, value] of Object.entries(params)) {
if (value != null) { // 即 value !== null && value !== undefined
cleaned[key] = value
}
}
return cleaned
}然后在 API 调用时显式使用：
import { cleanParams } from '@/utils/request'
api.get('/user/list', {
params: cleanParams({ page: 1, keyword: '', status: null, departmentId: undefined })
})
// → 实际发送：/user/list?page=1&keyword=⚠️ 注意：
cleanParams是你主动控制的，不是拦截器自动做的。它比 Axios 默认更“严格”（比如你想连''也去掉，就改判断条件），也更透明。
❌ 不推荐：试图在请求拦截器里“修复”已丢失的字段
因为当 config.params 进入请求拦截器时：
- 对于
GET请求，Axios 已经把params序列化成 URL 查询字符串了（config.url已含?...），config.params可能为空或未被使用； - 拦截器拿到的是最终要发出去的 config，不是原始传入的参数对象。
你无法从 config.url 中可靠地反解、再修改、再重写 URL —— 容易出错且破坏可读性。
? 补充：如果想让 null 变成字符串 "null" 发给后端（极少数场景）
可以自定义 paramsSerializer：
const request = axios.create({
paramsSerializer: {
serialize(params) {
const parts: string[] = []
for (const [key, val] of Object.entries(params)) {
if (val == null) {
parts.push(`${encodeURIComponent(key)}=null`) // 显式发 "null"
} else {
parts.push(`${encodeURIComponent(key)}=${encodeURIComponent(val)}`)
}
}
return parts.join('&')
}
}
})这样 status: null 就会变成 status=null 出现在 URL 中。
总结一下怎么做最稳妥
- 不依赖拦截器去“补漏”，拦截器专注加 token、loading、埋点；
- 在业务层调用 API 前，用
cleanParams()预处理参数对象； - 如需特殊语义（如传
"null"），改paramsSerializer，而不是动拦截器； - 记住：
''（空字符串）默认会被保留，这是 Axios 的设计，也是合理行为。
这样既清晰又可控，不会埋下隐性 bug。
