EnlightenCode

Axios 请求参数完全指南：query、params 和 data ​

在使用 Axios 发送 HTTP 请求时，我们经常需要传递各种参数。本文将详细介绍 Axios 中不同的参数传递方式及其使用场景。

一、Query 参数（URL 参数） ​

Query 参数是附加在 URL 末尾的键值对，通常用于 GET 请求。

1.1 特点 ​

  • 参数会显示在 URL 中
  • 有 URL 长度限制
  • 适用于数据量较小的请求
  • 通常用于数据查询、过滤等操作

1.2 使用方式 ​

javascript
// 方式一：使用 params 配置项（推荐）
axios.get('/api', {
  params: {
    page: 1,
    size: 10,
    keyword: 'test'
  }
})
// 生成的 URL: /api?page=1&size=10&keyword=test

// 方式二：直接拼接在 URL 中（不推荐）
axios.get('/api?page=1&size=10&keyword=test')

二、Data 参数（请求体参数） ​

Data 参数是包含在 HTTP 请求体中的数据，主要用于 POST、PUT、PATCH 等请求方法。

2.1 特点 ​

  • 参数不显示在 URL 中
  • 无数据大小限制
  • 支持复杂的数据结构
  • 可以设置不同的 Content-Type

2.2 常见使用方式 ​

javascript
// 1. 发送 JSON 数据（默认）
axios.post('/api', {
  username: 'admin',
  password: '123456'
})

// 2. 发送 form-data 格式
const formData = new FormData()
formData.append('file', file)
formData.append('name', 'test')
axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})

// 3. 发送 x-www-form-urlencoded 格式
const params = new URLSearchParams()
params.append('username', 'admin')
axios.post('/api', params, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

三、实践建议 ​

3.1 参数选择建议 ​

  • GET 请求：使用 query 参数（params 配置项）
  • POST 请求：使用 data 参数
  • 文件上传：使用 FormData
  • 表单提交：根据后端要求选择 JSON 或 form-urlencoded 格式

3.2 注意事项 ​

  1. Query 参数会自动进行 URL 编码，无需手动处理
  2. 发送大量数据时避免使用 GET 请求
  3. Content-Type 要与数据格式匹配
  4. 注意跨域请求时的参数传递方式

3.3 常见错误处理 ​

javascript
// ❌ 错误示例：GET 请求中混用 params 和 data
axios.get('/api', {
  params: { id: 1 },
  data: { name: 'test' }  // GET 请求不应该使用 data
})

// ✅ 正确示例：GET 请求使用 params
axios.get('/api', {
  params: {
    id: 1,
    name: 'test'
  }
})

总结 ​

在使用 Axios 时，正确理解和使用不同的参数传递方式非常重要：

  • Query 参数（params 配置）用于 GET 请求的 URL 参数
  • Data 参数用于请求体数据
  • 根据实际需求选择合适的数据格式和 Content-Type

掌握这些知识点，可以帮助我们更好地处理前后端交互，避免常见的参数传递问题。