前言

之前碰到axios请求，传递数组时候带上了[]，搜下解决方法没有深究，前段时间群里又看到今天总结下。

正文

什么情况下会出现[]？

axios使用params传递参数的时候，axios会默认对参数进行序列化处理，而处理方式就是用的qs库。

如果你封装的方法用qs处理的数据也会默认加上[]（库的说明叫索引）

axios: 可以在node_modules包下 axios => REDAME.md => 325行 paramsSerializer() 函数说明 找到
qs库: 可以在node_modules包下 qs => REDAME.md => 364行说明开始
暂时只知道这两种会出现[] 如有更多还望大佬指正

验证

1
2
3
4
5
6
7
8
9
10
11
let da = {a:[1,2,3]}
let dar = qs.stringify({a:[1,2,3]}) 
axios({
  url:'http://localhost:8888/token',
  data: dar,
  params:da,
  method:"post", 
  success:function(response){
    console.log(response)
  }
})

运行结果代码

qs各种格式转换

为了清楚起见，将显示超出这一点的示例，就好像输出未经过URI编码。请注意，在这种情况下，返回值将在实际使用过程中进行URI编码。

对数组进行字符串化时，默认情况下会为它们提供显式索引：

1
2
qs.stringify({ a: ['b', 'c', 'd'] });
// 'a[0]=b&a[1]=c&a[2]=d'

您可以通过将indices选项设置为false来覆盖它：

1
2
qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });
// 'a=b&a=c&a=d'

您可以使用arrayFormat选项指定输出数组的格式：

1
2
3
4
5
6
7
8
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'

总结

qs库默认会对对象数组进行序列化默认会带索引
axios 处理params是使用了qs库的stringify方法并设置了数组格式为[] ({ arrayFormat: 'brackets' })