vue中get请求如何传递数组参数的⽅法⽰例
前⾔: vue中在与后端进⾏数据交互时，使⽤axios发送请求，不做配置直接使⽤get请求传递数组类型参数的时候，后端是⽆法接收数据的，需要对axios⼀些简单的配置才能让后端完美的接收数组
1、问题
⽰例代码
let params = {
statusList: ['OVERDUE', 'DELAY']
}
this.$('/list', params)
.then(res => {})
.catch(e => {})
上述代码在不做配置的时候请求信息为：/list?statusList[]=OVERDUE&statusList[]=DELAY对于后端来说，statusList[]形式的提交是⽆效的，实际需要的是/list?statusList=OVERDUE&statusList=DELAY这种⽅式的提交。那么我们应该如何来解决这种问题呢？
2、解决⽅案
2.1 qs插件
qs主要是增加⼀些安全性的查询字符串解析和序列化字符串的库，qs的更多使⽤⽅式可以参考总结中提供的地址学习
1、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 输出结果：'a[0]=b&a[1]=c'
2、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 输出结果：'a[]=b&a[]=c'
3、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
/
/ 输出结果：'a=b&a=c'
4、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 输出结果：'a=b,c'
上述我们列举了qs中的序列化⼏种配置，其中{ arrayFormat: 'repeat' }的序列化结果满⾜我们的条件
2.2 axios配置
axios中有⼀个专门对数据进⾏序列化的配置属性paramsSerializer
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'repeat'})
},
2.3 具体配置
我们可以在axios请求中对参数进⾏序列化配置
后端字符串转数组
quest.use(async (config) => {
//只针对get⽅式进⾏序列化
if (hod === 'get') {
config.paramsSerializer = function(params) {
return qs.stringify(params, { arrayFormat: 'repeat' })
}
}
}
3、总结
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。