Vue 3 中请求拦截器怎么在发送前自动过滤掉空字符串字段-Vue.js-PHP中文网

vue 3 中 axios 请求拦截器通过递归 cleanempty 函数自动过滤空字段：get 清理 config.params，post/put 清理 config.data（跳过 formdata），x-www-form-urlencoded 则清理后 qs.stringify；需区分业务必传与可选字段，避免误删 page=0 等有效值。

vue 3 中请求拦截器怎么在发送前自动过滤掉空字符串字段

在 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
})