深入解析 axios 中 params 与 data 参数的区别与应用
本文详细解析 axios 中 params 和 data 两个参数的核心区别。params 用于 URL 查询字符串拼接，适用于 GET 请求；data 用于请求体（Request Body），通常用于 POST 请求。通过对比 axios.get 和 axios.post 的使用方式，阐明两者在封装请求时的不同职责，并提供统一使用 axios() 方法的建议。
引言：axios 参数使用的常见困惑
你是否也曾遇到这样的困惑：某个问题苦思冥想许久无果，却在某天突然豁然开朗，感叹其本质其实简单？起初觉得记录此类问题缺乏意义，但转念一想，既然它曾长期困扰你，或许未来会有新的延伸思考，因此决定将其整理记录。
axios 基础用法回顾
首先回顾 axios 的基础用法，即如何发起一个网络请求。
以 GET 请求为例进行说明。
// 发送的链接就是 https://www.baidu.com?a=1
axios.get('https://www.baidu.com', { params: { a: 1 } })
// 或者这样
axios({
method: "get",
url: 'https://www.baidu.com',
params: { a: 1 }
})
// 如果发送一个带请求头的就是这样
axios.get('https://www.baidu.com', { params: { a: 1 }, headers: { token: "123" } })
// 或者这样
axios({
method: "get",
url: 'https://www.baidu.com',
params: { a: 1 },
headers: { token: "111" }
})接着看 POST 请求的发起方式。
axios.post('https://www.baidu.com', { a: 1 })
// 或者这样
axios({
method: "post",
url: 'https://www.baidu.com',
data: { a: 1 }
})
// 如果发送一个带请求头的就是这样
axios.post('https://www.baidu.com', { a: 1 }, { headers: { token: "123" } })
// 或者这样
axios({
method: "post",
url: 'https://www.baidu.com',
data: { a: 1 },
headers: { token: "111" }
})params 与 data 的职责区分
通过对比可以发现，
axios.get 允许传递两个参数，分别是 url 和 其他参数；而 axios.post 则支持传递三个参数，依次为 url、请求发出去的参数 以及 其他参数。
这种参数数量不一致的情况容易让人记忆混乱，时而两个时而三个。因此，在实际项目封装网络请求时，我倾向于使用 axios() 进行统一封装，而非分别调用 axios.get 和 axios.post。
若使用 axios() 发起 GET 请求并需要传递参数，应使用 params 配置，具体示例如下：
axios({
method: "get",
url: 'https://www.baidu.com',
params: { a: 1 }
})而在发起 POST 请求时，则需要使用 data 来传递数据，示例如下：
axios({
method: "post",
url: 'https://www.baidu.com',
data: { a: 1 }
})不禁让人好奇，为何不能统一使用同一个参数？实际上，params 和 data 各自承载着不同的语义和功能。
params 用于拼接在 URL 后面的查询参数；而 data 则用于放置在请求体（Request Body）内的数据。
以发送 POST 请求为例，
axios({
method: "post",
url: 'https://www.baidu.com',
data: { a: 1 },
params: { a: 2 }
})在上述示例中，a=1 会被拼接在 URL 后面，而 a=2 则位于请求体中。由此可见，params 和 data 各自职责明确，互不干扰。
同时使用 URL 参数与请求体数据的方案
那么，如果希望使用 axios.post，既要在 URL 后拼接参数，又要在请求体中携带数据，该如何编写代码？
axios.post('https://www.baidu.com', { a: 1 }, { params: { a: 1 }, headers: { token: "123" } })综上所述，直接调用 axios 似乎更为便捷和直观。
至此，关于 axios 为何存在 params 和 data 两个参数的解析已结束。如需了解更多相关内容，请查阅本站过往文章或继续浏览后续系列文章，感谢大家的支持！
WebStorm内置JS代码格式化功能怎么用
2026-11-05 10:10:47
在线JS代码格式化与混淆压缩工具推荐及使用指南
2026-11-03 20:31:53
CodePen、JSFiddle与RunJS对比：哪款在线JavaScript编辑器更好用
2026-11-03 18:52:45
无需安装环境，5款主流JavaScript在线运行工具推荐
2026-11-03 18:23:26
JS怎么将地址栏查询字符串转换为JSON对象
2026-11-03 18:10:29