vue中get请求如何传递数组参数

昨天在项目中遇到了 前端需要用get请求方式传递数组格式参数给后端,贴一下解决办法

解决方案

1.qs插件

qs主要是增加一些安全性的查询字符串解析和序列化字符串的库,qs的更多使用方式可以参考总结中提供的地址学习            

    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 axios配置

axios中有一个专门对数据进行序列化的配置属性paramsSerializer

paramsSerializer:function(params){returnQs.stringify(params,{arrayFormat:'repeat'})},

2.3 具体配置

我们可以在axios请求拦截器中对参数进行序列化配置

axios.interceptors.request.use(async(config)=>{

//只针对get方式进行序列化

if(config.method==='get'){

config.paramsSerializer=function(params){

returnqs.stringify(params,{arrayFormat:'repeat'})}}}


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。