axios 之传递数组参数 探究 -- qs库

承接上文 axios.js 之传递数组参数 探究,继续探究 后端的数组传参可搞出一系列操作,详见:SpringMVC 数组类型参数定义以及前端如何传参 文中给

承接上文 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[]=2str = qs.stringify(params, {arrayFormat: 'indices'})
console.log('indices', decodeURI(str))
// ids[0]=1&ids[1]=2str = qs.stringify(params, {arrayFormat: 'repeat'})
console.log('repeat', decodeURI(str))
// ids=1&ids=2str = 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]=2str = 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]=2str = qs.stringify(params, {arrayFormat: 'repeat'})
console.log('indices', decodeURI(str))
// beans[id]=1&beans[name]=1&beans[id]=2&beans[name]=2str = qs.stringify(params, {arrayFormat: 'comma'})
console.log('comma', decodeURI(str))
// beans=[object Object]%2C[object Object]

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

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


end