前端传递list（数组）类型参数，后端接收失败

阅读本书更多章节>>>>

文章目录

踩坑：前端传递list（数组）类型参数，后端接收失败1.起因2.示例图3.解决办法

踩坑：前端传递list（数组）类型参数，后端接收失败

1.起因

前端使用axios封装之后传递list（数组）类型的参数，在抓包工具network中显示key后面会自动拼接一个[ ] 符号(/user/list?key[ ]=…)，导致后端接口是不能正常的进行参数的接收 正确的格式应该是 “/user/list?key=…”

2.示例图

后端接口需要传递的参数类型

如果前端传递list参数浏览器请求的时候就会在key后面自动添加[ ] 符号 导致参数不能正确的传递

正确的参数传递格式应该是这样

3.解决办法

前端在传递list参数时使用paramsSerializer函数将参数进行序列化，然后在传递参数的时候就能得到正确的参数形式
具体步骤：

首先要引入qs库 import qs from ‘qs’然后调用qs.stringify方法即可

qs.stringify在处理数组参数的时候有以下配置项可以实现不同的参数展示形式

qs.stringify({ids: [1, 2, 3]}, {indices: false})
//形式：ids=1&ids=2&id=3qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘indices’})
//形式：ids[0]=1&ids[1]=2&ids[2]=3qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘brackets’})
//形式：ids[]=1&ids[]=2&ids[]=3qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘repeat’})
//形式： ids=1&ids=2&id=3
所以配置项里面使用indices 和 arrayFormat:‘repeat’ 都是可以的

配置之后参数就能进行正确的传递

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-24/161849.html，文章来源：网络cs，作者：欧阳逸，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！