您现在的位置是:首页 > Javascript
当前栏目
前端 - get请求传递数组
2023-03-31 10:42:14 时间
感谢后端让我的知识点 + 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
相关文章
- 浅谈HarmonyOS Glide组件的GIF能力
- Windows 11更新:带来Microsoft 365小组件 商店界面微调
- 微软 Windows 11 Build 22000.168 (KB5005191) 预览版发布:Teams 更多语言
- HarmonyOS 鸿蒙开源第三方组件-表情雨EmojiRain
- 不是 Bug,微软确认 Windows 11 任务栏不再支持一些功能特性
- Windows 11预览版更新!带你围观Windows 11全新内置功能
- 经典组件在Windows 11获新生!Windows 11新版画图曝光
- HarmonyOS用Matrix实现各种图片ScaleType缩放
- HarmonyOS 基础之 UI 布局(一)
- HarmonyOS列表组件-ListContainer
- HarmonyOS实战—Text组件宽高三种值的写法和颜色属性
- 鸿蒙开源第三方组件—ANR异常监测组件 ANR-WatchDog-ohos
- 鸿蒙开源第三方组件—自定义流式布局组件FlowLayout_ohos
- HarmonyOS《鸿蒙操作系统开发入门经典》之前九类UI组件
- Chrome 94将上线HTTPS-First选项 锁型图标更改为向下箭头
- 微软发布首个Office ARM 64位预览版:原生性能堪比x64
- 鸿蒙开源第三方组件—日期和时间处理组件JodaTime-ohos
- CSS 盒模型
- Vue2.x-插槽slot用法
- Centos7 安装NodeJS以及Nvm多版本管理