前端
2022-08-29
2022-08-29
凡是夫妇不吵架的家庭,准是一块阴森之地,既没有冲击,故也没有快乐——柏杨
有些时候,我们需要使用GET
请求传递数组,但是使用很多前端请求框架,以及EcmaScript
自带的URLSearchParams
转换的URL
参数都无法直接进行转换:
例如以下格式:
1 | { |
使用URLSearchParams
转换结果:
1 | let searchParams = {current:1,size:1,orders:[{column:'age',asc:true},{column:'name',asc:true}]} |
明显不是我们要的结果
那我们写一行js
:
1 | 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]])) |
再封装一下:
1 | function handleArrayParams(params){ |
最后使用:
1 | let searchParams = {current:1,size:1,orders:[{column:'age',asc:true},{column:'name',asc:true}]} |
结果:
1 | '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
后面当做参数使用,即便是数组也可以,这里只做了一层,并没有尝试深入处理
解码后是这样一个格式:
1 | // 进行解码 |