axios请求参数实战：如何正确使用params和data属性

1次阅读

共计 2169 个字符，预计需要花费 6 分钟才能阅读完成。

在前后端分离的开发中，正确使用 HTTP 请求参数是每个前端开发者必须掌握的技能。axios 作为最流行的 HTTP 客户端之一，其 params 和 data 属性的混淆使用却经常导致接口调用的各种问题。本文将深入解析这两者的区别，并通过实际代码示例展示如何正确使用它们。

在 axios 请求中，params 和 data 的误用会导致一些典型问题：

GET 请求错误地使用了 data 属性传递参数，导致参数无法正确到达服务器
POST 请求将参数放在 params 中，结果服务器接收不到请求体数据
忽略 Content-Type 设置，导致后端无法正确解析请求体
特殊字符未编码，引发 URL 解析错误或安全问题

params 属性
用于 GET 请求，参数会被拼接到 URL 的查询字符串中
示例：axios.get('/api/user', {params: {id: 123}}) 会生成请求 URL /api/user?id=123
自动处理参数编码，但复杂对象需要手动序列化
data 属性
用于 POST、PUT 等需要请求体的方法
数据放在 HTTP 请求体中发送，不会显示在 URL 中
默认会根据 Content-Type 对数据进行不同方式的序列化
Content-Type 的影响
application/json：data 会被自动 JSON.stringify
application/x-www-form-urlencoded：需要使用 URLSearchParams 或 qs 库处理
multipart/form-data：用于文件上传等场景

// GET 请求正确用法
axios.get('/api/users', {
  params: {
    page: 1,
    size: 10,
    filter: 'active'
  }
})

// POST 请求正确用法
axios.post('/api/users', {
  name: 'John',
  age: 30,
  email: 'john@example.com'
}, {
  headers: {'Content-Type': 'application/json'}
})

// 处理 URL 编码格式
const params = new URLSearchParams()
params.append('username', 'john')
params.append('password', '123456')

axios.post('/login', params, {
  headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

// 自定义序列化
axios.post('/api/data', {some: 'data'}, {transformRequest: [(data, headers) => {
    // 自定义转换逻辑
    return JSON.stringify(data)
  }]
})

// 错误：GET 请求使用 data
axios.get('/api/user', {data: {id: 123}  // 参数不会发送
})

// 正确：GET 请求应使用 params
axios.get('/api/user', {params: {id: 123}
})

// 错误：POST 请求忽略 Content-Type
axios.post('/api/user', {name: 'John'}) // 后端可能无法正确解析

// 正确：明确指定 Content-Type
axios.post('/api/user', {name: 'John'}, {
  headers: {'Content-Type': 'application/json'}
})

参数安全性处理
对用户输入的参数进行验证和过滤
使用 encodeURIComponent 对特殊字符编码
考虑使用拦截器统一处理敏感参数
文件上传实现

const formData = new FormData()
formData.append('file', fileInput.files[0])
formData.append('description', 'Profile picture')

axios.post('/upload', formData, {
  headers: {'Content-Type': 'multipart/form-data'}
})

拦截器统一处理

// 请求拦截器示例
axios.interceptors.request.use(config => {
  // 统一添加参数或处理数据
  if (config.method === 'post') {config.headers['Content-Type'] = config.headers['Content-Type'] || 'application/json'
  }
  return config
})

正确使用 axios 的 params 和 data 属性不仅能避免很多低级错误，还能提高代码的可维护性。在实际项目中，我们还需要考虑：