get请求传递参数用params吗（前端 – get请求传递数组）

感谢后端让我的知识点 + 1

一
    
    
   、数组请求方式

get 请求有以下几种方式来传递数组：

GET http://localhost:8080/users?roleIds=1&roleIds=2 GET http://localhost:8080/users?roleIds[0]=1&roleIds[1]=2 GET http://localhost:8080/users?roleIds[]=1&roleIds[]=2 GET http://localhost:8080/users?roleIds=1,2

二     


     


     

、解决方案

自己解决 let a = ["b", "c", "d"]; let str = ""; for(var index in a){ str+=a=+a[index]+& } // str: a=b&a=c&a=d 借助qs插件

qs.stringify({ a: [“b
    
    
   ”, “c     


     


     

”, “d 




 




 




”] }); // a[0]=b&a[1]=c&a[2]=d

qs.stringify({ a: [“b

   

   

  ”, “c     

     

     
”, “d  




  




  




”] }, { indices: false }); // a=b&a=c&a=d

qs 还可以通过arrayFormat 选项进行格式化输出：

qs.stringify({ a: [“b


  


  


 ”, “c     
     
     ”] }, { arrayFormat: ‘indices’ }) // a[0]=b&a[1]=c

qs.stringify({ a: [“b   




   




   




”, “c



 



 



”] }, { arrayFormat: ‘brackets’ }) // a[]=b&a[]=c

qs.stringify({ a: [“b               ”, “c    




    




    



”] }, { arrayFormat: ‘repeat’ }) // a=b&a=c

qs.stringify({ a: [“b














”, “c              ”] }, { arrayFormat: ‘comma’ }) // a=b,c

三 




 




 




、axios 配置

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

{ url: /user, method: get, // default baseURL: https://some-domain.com/api/, // `paramsSerializer` 是一个负责 `params` 序列化的函数 // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/) paramsSerializer: function(params) { return qs.stringify(params,{arrayFormat: brackets}) }, }

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

axios.interceptors.request.use(async (config) => { //只针对get方式进行序列化 if (config.method === get) { config.paramsSerializer = function(params) { return qs.stringify(params, { arrayFormat: repeat }) } } }

四

   

   

  、参数转译

需要注意的是
    
    
   ，如果请求参数中带有中括号[]     


     


     

，[]在url中属于功能性字符 




 




 




，前端需要使用decodeURIComponent()函数转义

   

   

  ，否则会出现400 Bad Request错误    
    
    
。

qs.stringify({ a: [‘b’, ‘c’, ‘d’] }); // a%5B0%5D=b&a%5B1%5D=c&a%5B2%5D=d decodeURIComponent(qs.stringify({ a: ["b", "c", "d"] }) // a[0]=b&a[1]=c&a[2]=d

参考链接

axios中文文档

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