[JavaScript知识库]axios 之传递数组参数 探究 -- qs库

承接上文 axios.js 之传递数组参数 探究，继续探究

后端的数组传参可搞出一系列操作，详见：SpringMVC 数组类型参数定义以及前端如何传参
文中给出了各种数据参数的url传参示例，那我们的目的就是要知道，如何通过axios构造出这种形式的url。在之前我们已经知道，问题的关键在于 axios 的序列化配置，而 axios 使用的序列化库为 qs，所以，问题的本质是探究 qs 的各种序列化配置！

qs库 的文档：https://www.npmjs.com/package/qs
其提供了在线测试工具：https://npm.runkit.com/qs
既然有在线测试工具，那直接将所有配置挨个测试一下，查看其效果就可以知道使用什么配置即可对应上后端的参数。（没错，就是这么简单粗暴）
测试的思路就是，先编写符合后端格式的json数据，通过调用 qs库 序列化该json，若序列化后的字符串对应上后端的预期格式，即匹配。
测试例子如下：

var qs = require("qs")

// === 普通类型数组 ==
params = {
  ids: [1, 2]
}
str = qs.stringify(params, {arrayFormat: 'brackets'})
console.log('brackets', decodeURI(str))
// ids[]=1&ids[]=2

str = qs.stringify(params, {arrayFormat: 'indices'})
console.log('indices', decodeURI(str))
// ids[0]=1&ids[1]=2

str = qs.stringify(params, {arrayFormat: 'repeat'})
console.log('repeat', decodeURI(str))
// ids=1&ids=2

str = qs.stringify(params, {arrayFormat: 'comma'})
console.log('comma', decodeURI(str))
// ids=1%2C2


// === 对象类型数组 ===
params = {
    beans: [
	    {
	        id: 1,
	        name: 1
	    },
	    {
	        id: 2,
	        name: 2
	    }
    ]
}
str = qs.stringify(params, {arrayFormat: 'brackets'})
console.log('brackets', decodeURI(str))
// beans[][id]=1&beans[][name]=1&beans[][id]=2&beans[][name]=2

str = qs.stringify(params, {arrayFormat: 'indices'})
console.log('indices', decodeURI(str))
// beans[0][id]=1&beans[0][name]=1&beans[1][id]=2&beans[1][name]=2

str = qs.stringify(params, {arrayFormat: 'repeat'})
console.log('indices', decodeURI(str))
// beans[id]=1&beans[name]=1&beans[id]=2&beans[name]=2

str = qs.stringify(params, {arrayFormat: 'comma'})
console.log('comma', decodeURI(str))
// beans=[object Object]%2C[object Object]

接下来就是看图说话了，根据你要实现的效果，进行相应的配置。

额，得搞几个例子，详见 axios 传递数组参数示例

end