axios请求中get与post的参数传递问题
axios的请求格式有一下几种
详细且直观的教程:Axios 各种请求方式传递参数格式 - 简书 (jianshu.com)https://www.jianshu.com/p/53deecb09077
1.最基础的axios使用方法-post
this.$axios({ //这种格式,是需要每个参数都弄成对象的 methods: 'POST', url: '#', data: { key1: val1, key2: val2 }, timeout: 1000, baseURL:'xxxx' ...//其他相关配置 })
2.最基础的axios使用方法-get
this.$axios({ methods: 'get', url: '#', params: { //注意是params,get请求必须写上params,不能写data key1: val1, key2: val2 }, timeout: 1000, baseURL:'xxxx' ...//其他相关配置 })
注意:
*在get请求下,参数需要使用【params】来设置,
*而post请求中,是使用data来传递的
3.axios的简化写法
this.$axios.get('url')
这种直接没有参数的,就写个url就行了
如果get请求中有参数,需要用params:{}括起来
如果有请求的其他配置信息,则直接跟着params往下写即可
this.$axios.get('url', { params: this.formData , timeout: 1000, baseURL:'xxxx' }) this.$axios.get('url', { params: { key1: val1, key2: val2 } , timeout: 1000, //跟params并列,都在一个{}里面 baseURL:'xxxx' })
this.$axios.post('url')
注意post和get的简写不同之处 :
formData={ key1:val1, key2:val2 .... } .... //如果只跟参数,没有其他配置项了,可以不用把参数用{}包裹起来,直接写就行 this.$axios.post('url', this.formData) this.$axios.post('url', //post类型的请求,第二个{}对象是参数,而且这样的简写模式,不能再写data:{},得直接用{}将参数括起来 //或者直接写this.formData {key1:val1,key2:val2}, //然后又其他的配置,再用{}括起来,跟data同级别放置,单独一个花括号,不跟data参数一个花括号 { timeout: 1000, baseURL:'xxxx' } )
如果有多个参数,就需要用 {} 包裹起来,并且要按照 key:val键值对的格式来声明
而且,因为是post请求,所以传参的key要用data
同上,因为有多个数据配置项,所以要用 {} 包裹起来
而且,因为是get请求,所以传参的key要用params
注意:get请求直接写参数是错误写法,会导致请求无法携带参数
this.$axios.get('url', {key1:val1,key2:val2}) //错误写法,get请求必须用params指定参数
如果没有其他配置项,也不要直接{参数},一定要加上params ,上面这种直接写参数的方法,发送请求的时候是不会带上参数的!
重点说明:
在使用axios时,要注意到配置选项中包含params和data两者,以为他们是相同的,实则不然
因为:
1.params是添加到url的请求字符串中的,用于get请求;
2.而data是添加到请求体(body)中的, 用于post请求;
未知错误:
然后你以为用对【params】和【data】就能正确拿到数据了?nonono~ too young to simple
编辑
只有这样的简写模式能直接在请求头中看到传递的参数,如果不使用简写,而是使用下面的这种完全的格式写法:
编辑
那么,请求头中看不到参数。而原因就是Content-Type的问题
在使用原生ajax、axios请求时,如果不显示的设置Content-Type,那么默认是text/plain,这时服务器就不知道怎么解析数据了【但是:jquery在执行post请求时,会设置Content-Type为application/x-www-form-urlencoded】
解决方法:
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
或者:
{headers:{'Content-Type':'application/x-www-form-urlencoded'}}
显式地设置axios的请求头,这样就能看见请求头参数了
当然,你也可以 直接用简写模式嘛,省事省力~
虽然我有设置 'Content-Type': 'application/json;charset=UTF-8',但还是只有缩写版才能看见请求体的数据,没找到原因,不懂,啊吧啊吧啊吧~
#axios##请求##js#以实战为线索,逐步深入HTML开发各个环节,掌握web前端常用性能体验优化思路,打造完整前端工作流,提升工程化编码能力和思维能力。