前端get请求传递数组型参数时的处理方式

1|0场景

  • 后端get接口设计接受数组型查询参数时,只接受重复的query格式,如 arr=[1,2,3],那么在query里的参数格式需要是 a=1&a=2&a=3
  • 前端get请求直接传数组会默认处理为a[]=1&a[]=2&a[]=3,后端无法识别(恼),传json字符串和join拼接后端都不同意
  • 如果直接在url中做参数拼接,实在是又蠢又费力

2|0解决

  • 使用qs库,对axios请求封装paramsSerializer(params处理函数),让接口接收到数组类型参数时,用qs统一处理成repeat形式
  • 由于AUI是对axios做套层封装,所以对AUI同样管用

3|0举例

import axios from 'axios' import qs from 'qs' const params = {   name: 'xiaoming',   hobbies: [1, 2, 3] } axios.get('https://api.example.com/api', {   params: { array: arrayParams },   paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'comma' }) }) // 最终请求为 https://api.example.com/api?name=xiaoming&hobbies=1,2,3 axios.get('https://api.example.com/api', {   params: { array: arrayParams },   paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'indices' }) // qs的默认arrayFormat }) // 最终请求为 https://api.example.com/api?name=xiaoming&hobbies[0]=1&hobbies[1]=2&hobbies[2]=3 axios.get('https://api.example.com/api', {   params: { array: arrayParams },   paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'brackets' }) }) // 最终请求为 https://api.example.com/api?name=xiaoming&hobbies[]=1&hobbies[]=2&hobbies[]=3 axios.get('https://api.example.com/api', {   params: { array: arrayParams },   paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'repeat' }) }) // 最终请求为 https://api.example.com/api?name=xiaoming&hobbies=1&hobbies=2&hobbies=3

__EOF__

本文作者Mizuki
本文链接https://www.cnblogs.com/mizuki-vone/p/18034707.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   Mizuki-Vone  阅读(3949)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
点击右上角即可分享
微信分享提示