vue 3 中请求拦截器可对表单数据做格式转换，核心是识别 content-type 为 application/x-www-form-urlencoded 的请求，用 qs.stringify() 清洗空值、扁平化嵌套对象并转为键值对字符串，再设 headers 和 data，且仅作用于 post/put 等含 data 的请求。
Vue 3 中请求拦截器可以在发送前对表单数据做格式转换，核心是利用 axios 请求拦截器 拦截 config 对象，识别表单类请求（如 Content-Type: application/x-www-form-urlencoded），再用 qs.stringify() 或手动遍历处理，把嵌套对象、空值、布尔值等转成后端能接收的标准键值对。
识别并匹配表单请求类型
不是所有请求都要转格式，只对明确走表单提交的请求处理。常见判断方式：
- 检查
config.headers['Content-Type']是否包含application/x-www-form-urlencoded - 或约定统一使用
config.dataType === 'form'这类自定义标记（需业务层配合） - 避免误处理 JSON 请求：若 header 是
application/json，直接跳过格式转换
过滤空值 + 扁平化结构
后端常拒收 null、undefined、空字符串字段，表单也通常不支持嵌套对象。拦截器里可结合 lodash.pickBy 和递归扁平化：
- 用
pickBy(value => ![null, undefined, ''].includes(value))清理无效字段 - 对深层对象（如
{user: {name: 'a', age: 18}}）转成user.name=a&user.age=18，可用qs.stringify(data, { allowDots: true }) - 布尔值默认转成
1/0或true/false字符串，按后端要求统一映射
自动序列化并重设请求体
完成数据清洗和结构转换后，要确保最终发出去的是字符串而非对象：
- 调用
qs.stringify(transformedData)得到标准 query string - 显式设置
config.headers['Content-Type'] = 'application/x-www-form-urlencoded' - 把结果赋给
config.data（注意不是config.params） - 务必 return config，否则请求发不出去
兼容非表单场景，不破坏原有逻辑
拦截器要“有选择地干活”，不能一刀切：
- 对
GET请求，一般只处理params，不碰data - 对
POST/PUT且含data的，才做表单序列化 - 保留原始
config.transformRequest行为，避免与 axios 默认序列化冲突 - 错误分支必须
return Promise.reject(error)，防止异常被静默吞掉
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
