get请求传递数组

get请求传递数组

Excerpt

传递数据最好使用post请求放到body中，如果非要使用get请求传递数组，可以通过下面方式

---

一、数组请求方式

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](https://so.csdn.net/so/search?q=indices\&spm=1001.2101.3001.7020): false }); // a=b\&a=c\&a=d

qs 还可以通过arrayFormat 选项进行[格式化输出](https://so.csdn.net/so/search?q=%E6%A0%BC%E5%BC%8F%E5%8C%96%E8%BE%93%E5%87%BA\&spm=1001.2101.3001.7020)：

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=ds
decodeURIComponent(qs.stringify({ a: ["b", "c", "d"] }) // a[0]=b&a[1]=c&a[2]=d

---