解析为什么axios会有params和data两个参数
更新时间：2023年10月27日 10:32:21 作者：程序员超超
本文给大家分享为什么axios会有params和data两个参数,先来回顾一下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" }
})这里我们可以发现
axios.get可以传递两个参数 url和其他参数axios.post可以传递三个参数 url、请求发出去的参数、其他参数
好像不方便记忆，一会传2个，一会传3个的。所以一般情况下，即使是对项目封装网络请求，我也会使用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是请求体里面的参数
例如发送post的时候
axios({
method: "post",
url: 'https://www.baidu.com',
data: { a: 1 },
params: { a: 2 }
})上面例子a=1会放在url后面拼接，而a=2会在请求体中。所以params和data其实是各司其职的。
那么再来看一下，如果像使用axios.post，我既想在url后面拼接参数，又想在请求体里面有参数，该怎么写呢？
axios.post('https://www.baidu.com', { a: 1 }, { params: { a: 1 }, headers: { token: "123" } })所以还是感觉直接调用axios好用
到此这篇关于为什么axios会有params和data两个参数的文章就介绍到这了,更多相关axios params和data两个参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了微信小程序实现星级评分，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要为大家详细介绍了js实现简单抽奖功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
下面小编就为大家带来一篇文件上传,iframe跨域数据提交的实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
layui技巧：下拉框未展示问题;下拉框的onchange事件处理;关闭弹出层,重新加载父页面;父页面如何传递参数给弹出层的iframe页面;表单元素处于禁用状态;表单提交如何获取表单元素值集合;数据表格固定列;带搜索的下拉框;表单提交阻止页面跳转;父页面和子窗口传递值2024-07-07
javascript 动态改变onclick事件触发函数代码
javascript 动态改变onclick事件触发函数代码，需要的朋友可以参考下。2011-08-08
three.js是一款webGL框架，由于其易用性被广泛应用。接下来通过本文给大家分享three.js加载obj模型的实例代码，需要的朋友参考下吧2017-11-11
方法重写，重写要禁用的方法，并让它什么也不做，结果证明真的可行，但并不知道是不是一个科学的方法，我拿出来与大家共同讨论一下2013-07-07
这篇文章主要介绍了提升PHP安全：8个必须修改的PHP默认配置,PHP.ini中的默认配置是面向开发者的,如果是生产环境是必须要修改一些配置的,需要的朋友可以参考下2014-11-11
这篇文章主要介绍了微信运维交互机器人的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了js实现适用于素材网站的黑色多级菜单导航条效果,涉及javascript鼠标事件及页面元素样式的动态切换技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
最新评论