前端开发|请求拦截 ajax 前置过滤器_filter前置过滤器

🔍 前端开发中的"门神"：请求拦截与AJAX前置过滤器详解

场景引入：
凌晨3点，你写的页面突然疯狂报错——所有请求都带上了测试环境的token😱！这时候如果有个"安检员"在请求发出前自动修正参数，该多好？没错，这就是今天要聊的请求拦截和AJAX前置过滤器，它们就像前端请求的"门神"，默默帮你解决80%的接口管理难题！

什么是请求拦截？

想象你家的智能门锁🚪：快递来了自动验证身份，可疑人员直接拒之门外，请求拦截同理，它能在请求发出前和响应后插入处理逻辑。

常见用途：
✅ 自动添加token
✅ 统一错误处理
✅ 监控请求耗时
✅ mock数据拦截

// axios拦截器示例
axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer xxxxx' // 自动加token
  console.log(`📡 请求发出：${config.url}`)
  return config
})

AJAX前置过滤器实战

不同框架有不同实现,但核心思路都是：在请求到达浏览器网络层之前进行预处理。

jQuery的$.ajaxPrefilter

// 全局前置过滤器
$.ajaxPrefilter((options, originalOptions, jqXHR) => {
  if (options.url.includes('/api/')) {
    options.data = $.extend({ timestamp: Date.now() }, options.data) // 自动加时间戳
  }
})

Fetch API的拦截方案

原生fetch没有直接拦截器,但可以封装：

const _fetch = window.fetch
window.fetch = async (...args) => {
  console.log('🔍 拦截到fetch请求', args)
  args[1] = { 
    ...args[1], 
    headers: { 'X-Request-From': 'MyApp' } 
  }
  return _fetch(...args)
}

Vue的axios封装技巧

// 在Vue项目中更优雅的写法
const service = axios.create({
  baseURL: 'https://api.example.com'
})
service.interceptors.request.use(config => {
  if (localStorage.token) {
    config.headers.Auth = localStorage.token // 💡 自动注入登录态
  }
  return config
})

高级过滤场景

接口权限控制

axios.interceptors.request.use(config => {
  if (config.url === '/admin' && !isAdmin()) {
    return Promise.reject('⚠️ 权限不足') // 直接阻断请求
  }
  return config
})

请求限速处理

let lastRequestTime = 0
$.ajaxPrefilter((options) => {
  const now = Date.now()
  if (now - lastRequestTime < 1000) {
    console.log('🐢 请求速度过快，自动延迟')
    return new Promise(resolve => {
      setTimeout(() => resolve(options), 1000)
    })
  }
  lastRequestTime = now
})

数据加密拦截

service.interceptors.request.use(config => {
  if (config.encrypt) {
    config.data = crypto.encrypt(JSON.stringify(config.data)) // 🔒 自动加密
  }
  return config
})

避坑指南 🚨

1. 不要修改原始请求对象：始终返回新对象
2. 避免循环拦截：拦截器内不要再发请求
3. 注意执行顺序：后添加的拦截器先执行
4. 性能监控：复杂逻辑可能拖慢请求速度

// 错误示范！会导致无限循环
axios.interceptors.request.use(config => {
  axios.get('/token') // ❌ 绝对不要在拦截器内发起新请求
  return config
})

2025年的新趋势

根据2025年前端生态调研：

• 智能拦截：AI动态分析请求模式自动优化
• WebAssembly加速：加密等重型操作移至WASM
• 边缘计算集成：CDN边缘节点直接处理简单拦截

：
请求拦截就像给前端请求装上"智能管家"🧠，从简单的加token到复杂的权限控制，都能优雅处理，下次遇到重复的请求处理代码时，记得试试这些拦截方案，让你的代码更干净、更专业！

小作业：尝试给你的项目添加一个请求耗时统计拦截器~ ✨