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'})}}}


你可能感兴趣的:(vue中get请求如何传递数组参数)