Vue 3 中请求拦截器怎么在发送前自动过滤掉值为 null 的字段-Vue.js-PHP中文网

vue 3中请求拦截器不负责过滤null字段，该行为发生在axios参数序列化阶段；推荐在api调用前用cleanparams函数预处理参数，而非在拦截器中修复。

vue 3 中请求拦截器怎么在发送前自动过滤掉值为 null 的字段

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 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
}</t></t></t>

然后在 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 默认更“严格”（比如你想连 '' 也去掉，就改判断条件），也更透明。

Auth0 Vue
在 Vue.js 3 中添加身份验证（登录、注销、用户会话、受保护路由），集成 @auth0/auth0-vue SDK，配合 Vite 使用。

下载

❌ 不推荐：试图在请求拦截器里“修复”已丢失的字段

因为当 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 中。