文章目录
踩坑：前端传递list（数组）类型参数，后端接收失败
1.起因
前端使用axios封装之后传递list（数组）类型的参数，在抓包工具network中显示key后面会自动拼接一个[ ] 符号(/user/list?key[ ]=…)，导致后端接口是不能正常的进行参数的接收 正确的格式应该是 “/user/list?key=…”
2.示例图
后端接口需要传递的参数类型
如果前端传递list参数浏览器请求的时候就会在key后面自动添加[ ] 符号 导致参数不能正确的传递
正确的参数传递格式应该是这样
3.解决办法
- 前端在传递list参数时使用paramsSerializer函数将参数进行序列化，然后在传递参数的时候就能得到正确的参数形式
- 具体步骤： > 1. 首先要引入qs库 import qs from ‘qs’> 2. 然后调用qs.stringify方法即可
- qs.stringify在处理数组参数的时候有以下配置项可以实现不同的参数展示形式 > 1. qs.stringify({ids: [1, 2, 3]}, {indices: false}) //形式：ids=1&ids=2&id=3> 2. qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘indices’}) //形式：ids[0]=1&ids[1]=2&ids[2]=3> 3. qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘brackets’}) //形式：ids[]=1&ids[]=2&ids[]=3> 4. qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘repeat’}) //形式： ids=1&ids=2&id=3所以配置项里面使用indices 和 arrayFormat:‘repeat’ 都是可以的
配置之后参数就能进行正确的传递
本文转载自: https://blog.csdn.net/qq_45993474/article/details/136073755
版权归原作者 KeLe鸭 所有， 如有侵权，请联系我们删除。
版权归原作者 KeLe鸭 所有， 如有侵权，请联系我们删除。