get请求包含参数属性为数组

简介: get请求包含参数属性为数组

凡是夫妇不吵架的家庭,准是一块阴森之地,既没有冲击,故也没有快乐——柏杨

有些时候,我们需要使用GET请求传递数组,但是使用很多前端请求框架,以及EcmaScript自带的URLSearchParams转换的URL参数都无法直接进行转换:

例如以下格式:

{
    "current": 1,
    "size": 1,
    "orders": [
        {
            "column": "age",
            "asc": true
        },
        {
            "column": "name",
            "asc": true
        }
    ]
}

使用URLSearchParams转换结果:

let searchParams = {current:1,size:1,orders:[{column:'age',asc:true},{column:'name',asc:true}]}
new URLSearchParams(searchParams).toString()
// 'current=1&size=1&orders=%5Bobject+Object%5D%2C%5Bobject+Object%5D'
// decodeURIComponent 解码 current=1&size=1&orders=[object+Object],[object+Object]

明显不是我们要的结果

那我们写一行js

Object.fromEntries(Object.entries(params).flatMap(([k,v])=>Array.isArray(v)?Object.entries(v).flatMap(([index,value])=> Object.entries(value).map(([ak,av])=>[`${k}[${index}].${ak}`,av])):[[k,v]]))

再封装一下:

function handleArrayParams(params){
 return Object.fromEntries(Object.entries(params).flatMap(([k,v])=>Array.isArray(v)?Object.entries(v).flatMap(([index,value])=> Object.entries(value).map(([ak,av])=>[`${k}[${index}].${ak}`,av])):[[k,v]]))   
}

最后使用:

let searchParams = {current:1,size:1,orders:[{column:'age',asc:true},{column:'name',asc:true}]}
function handleArrayParams(params){
 return Object.fromEntries(Object.entries(params).flatMap(([k,v])=>Array.isArray(v)?Object.entries(v).flatMap(([index,value])=> Object.entries(value).map(([ak,av])=>[`${k}[${index}].${ak}`,av])):[[k,v]]))   
}
new URLSearchParams(handleArrayParams(searchParams)).toString()

结果:

'current=1&size=1&orders%5B0%5D.column=age&orders%5B0%5D.asc=true&orders%5B1%5D.column=name&orders%5B1%5D.asc=true'

这个可以直接放在url后面当做参数使用,即便是数组也可以,这里只做了一层,并没有尝试深入处理

解码后是这样一个格式:

// 进行解码
decodeURIComponent('current=1&size=1&orders%5B0%5D.column=age&orders%5B0%5D.asc=true&orders%5B1%5D.column=name&orders%5B1%5D.asc=true')
// 解码后
'current=1&size=1&orders[0].column=age&orders[0].asc=true&orders[1].column=name&orders[1].asc=true'
相关文章
|
2月前
|
前端开发 小程序
前端get请求参数包含数组的情况
前端get请求参数包含数组的情况
39 0
|
5月前
自定义封装一个方法让这个方法可以判断所有的数据类型并返回
自定义封装一个方法让这个方法可以判断所有的数据类型并返回
16 0
|
5月前
get请求包参数属性为数组(二)
get请求包参数属性为数组(二)
32 0
|
前端开发 Java 数据库
SpringBoot返回枚举对象中的所有属性以对象的形式返回(一个@JSONType解决)
SpringBoot返回枚举对象中的所有属性以对象的形式返回(一个@JSONType解决)
609 0
|
12月前
|
前端开发 JavaScript API
|
缓存 NoSQL Java
如何给多参数接口添加缓存(根据方法名字+参数名生成对应的key)
如何给多参数接口添加缓存(根据方法名字+参数名生成对应的key)
135 0
如何给多参数接口添加缓存(根据方法名字+参数名生成对应的key)
|
XML JSON 编解码
在请求中传入不定长参数实现不同的逻辑处理的解决办法
在请求中传入不定长参数实现不同的逻辑处理的解决办法
|
API
@JsonView 处理返回值,实现接口返回想要的字段
@JsonView 处理返回的json ,实现返回需要的字段
1572 0