文章目录

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

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

1.起因

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

2.示例图

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

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

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

3.解决办法

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

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

3. 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’ 都是可以的

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