前端 - get请求传递数组(前端get请求传数组)

前端 - get请求传递数组

推荐整理分享前端 - get请求传递数组(前端get请求传数组)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:前端get请求传递json参数,前端get请求传递json参数,前端get请求传数组,前端get请求传数组,前端get请求传参字符串,前端get请求传递数组,前端get请求传入url链接 后端接收不全,前端get请求传入url链接 后端接收不全,内容如对您有帮助，希望把文章链接给更多的朋友！

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

一、数组请求方式

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

GET http://localhost:8080/users?roleIds=1&roleIds=2GET http://localhost:8080/users?roleIds[0]=1&roleIds[1]=2GET http://localhost:8080/users?roleIds[]=1&roleIds[]=2GET 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=ddecodeURIComponent(qs.stringify({ a: ["b", "c", "d"] }) // a[0]=b&a[1]=c&a[2]=d

参考链接 axios中文文档 vue中get请求如何传递数组参数