axios参数详解：如何正确使用param和data发送请求

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

HTTP 请求基础：GET 与 POST 的本质区别

在开始 axios 参数讲解前，我们需要理解 HTTP 最基础的两种请求方法：

1. GET 请求：参数通过 URL 的查询字符串（query string）传递，形如?key1=value1&key2=value2，在浏览器地址栏可见。适合数据量小、非敏感信息的获取操作。
2. POST 请求：参数放在请求体（request body）中传输，不可见且无长度限制。适合提交敏感数据或大量数据（如文件上传）。

axios 参数核心：params 与 data 对比

axios 将这两种传参方式抽象为两个配置项：

• params：对应 GET 请求的查询参数，最终会被拼接到 URL 上
• data：对应 POST/PUT/PATCH 等请求的请求体内容

代码示例对比

// GET 请求示例（带查询参数）axios.get('/api/user', {
  params: {  // 注意这个 params 配置项
    id: 123,
    type: 'vip'
  }
})
// 实际请求 URL 变为：/api/user?id=123&type=vip

// POST 请求示例（带 JSON body）axios.post('/api/login', {
  data: {  // 直接传对象，不需要包裹在 data 属性里
    username: 'admin',
    password: 'p@ssw0rd'
  }
})
// 请求体是 JSON 字符串：{"username":"admin","password":"p@ssw0rd"}

深度用法解析

表单提交的特殊处理

当需要提交表单格式（application/x-www-form-urlencoded）数据时：

const params = new URLSearchParams()
params.append('username', 'admin')
params.append('password', '123456')

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

常见问题排查指南

1. 后端收不到 GET 参数：
2. 检查是否错误使用了 data 代替params

3. 确认参数没有被 URL 编码错误（可用浏览器直接访问测试）

4. POST 请求返回 400 错误：

5. 检查请求头 Content-Type 是否匹配（JSON/ 表单）
6. 使用 Chrome 开发者工具的 Network 面板查看实际发送内容

最佳实践建议

1. 参数序列化统一处理：

   // 全局配置 JSON 序列化
   axios.defaults.transformRequest = [function (data) {return JSON.stringify(data)
   }]

2. 安全防护：

3. 敏感参数永远不要用 GET 请求
4. 对用户输入参数做 XSS 过滤
5. 重要操作添加 CSRF Token

思考题

根据 HTTP 协议规范，GET 请求是否可以携带 body？虽然技术上可行（如下代码），但为什么这种设计不被推荐？

// 不推荐的做法！axios.get('/api/test', {data: { foo: 'bar'}  // GET 请求带 body
})

提示：考虑缓存机制、协议规范性和中间件兼容性等因素。