不知道大家有没有过这种感觉,突然一个问题百思不得其解,然后突然有一天就明白了。然后就感觉这个问题原来这么简单,本来想记录下来,但是又感觉这么简单的问题记录下来没啥意义。但是回过头来想一想,这个问题之前其实困扰了你很长时间。感觉还是记录一下比较好,万一哪一天突然对这个问题有了新的扩展呢?
先来回顾一下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后面拼接参数,又想在请求体里面有参数,该怎么写呢?文章来源:https://www.toymoban.com/news/detail-716166.html
axios.post('https://www.baidu.com', { a: 1 }, { params: { a: 1 }, headers: { token: "123" } })
所以还是感觉直接调用axios
好用文章来源地址https://www.toymoban.com/news/detail-716166.html
到了这里,关于为什么axios会有params和data两个参数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!