浅谈vue中get请求解决传输数据是数组格式的问题
qs的stringify接收2个参数，第一个参数是需要序列化的对象，第二个参数是转化格式,一般默认格式是给出明确的索引，如：arr[0]=1&arr[1]=2
//indices是index的复数格式，因此indices是索引的意思
//bracket是括号的意思，因此arrayFormat:'brackets'代表数组下标为空[]
qs.stringify({arr:[1,2,3]},{indices:false})//arr=1&arr=2&arr=3
qs.stringify({arr:[1,2,3]},{arrayFormat:'indices'})//arr[0]=1&arr[1]=2&arr[2]=3
qs.stringify({arr:[1,2,3]},{arrayFormat:'brackets'})//arr[]=1&arr[]=2&arr[]=3
qs.stringify({arr:[1,2,3]},{arrayFormat:'repeat'})//arr=1&arr=2&arr=3
qs的parse()使用
如果接口需要获取get请求接口的请求数据，可以使用parse()，将拼接在地址的参数数据转换为对象
leturl="111.111.3.203:8080/getList?id=1&name=huahua&arr=a&arr=b"
letsplitObj=url.split('?')[1]
qs.parse(splitObj)//{id:'1',name:'huahua',arr:['a','b']}
qs.stringify和JSON.stringify的区别
letobj={a:1,b:2}
qs.stringify(obj)//a=1&b=2
JSON.stringify(obj)//"{'a':1,'b':2}"
qs解决数组参数问题
安装axios，qs
npminstallqs
npminstallaxios-S
在main.js中引入qs
importVuefrom'vue' importqsfrom'qs' importaxiosfrom'axios' Vue.prototype.$qs=qs;//qs全局挂载在vue实例上 Vue.prototype.$http=axios;//axios全局挂载在vue实例上
在组件中使用
get请求的请求参数是将数据放在config的params中，实际是通过“&”拼接在url上
如果请求参数是数组arr=[1,2,3]，get请求不对数组做任何处理，则传递给后端的接口是
"url地址?arr[]=1&arr[]=2&arr[]=3"，接口会报错，因为识别不了“[]”这个符号
需要对数组进行修改，需要通过qs的stringify()方法将数组序列化，则传递给后端的接口是“url地址?arr=1&arr=2&arr=3”，接口不会报错
this.arr=[1,2,3]
//写法一,直接使用qs的stringify()
this.$http.get('url地址',{
params:{
arr:this.$qs.stringify(this.arr)//数组拼接在url地址url地址?arr=1&arr=2&arr=3
}
}).then(()=>{
})
//写法二，使用axios提供的paramsSerializer序列化函数
this.$http.get('url地址',{
params:{
arr:this.arr//数组拼接在url地址url地址?arr=1&arr=2&arr=3
},
paramsSerializer:(params)=>{
returnthis.$qs.stringify(params)
}
}).then(()=>{
})
以上这篇浅谈vue中get请求解决传输数据是数组格式的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。