问题
当我们需要通过get方式传递一个数组作为参数 tag:[1,2,3,4]
预期是解析为： http://localhost:8080/htsy-integrated/test-plan/case-del?planDetailId=1&planDetailId=2
然而真相是这样的：http://localhost:8080/htsy-integrated/test-plan/case-del?planDetailId[]=1&planDetailId[]=2，后台是不可能解析到传递的参数。
解决方案
01. 自己处理
// 编辑-(批量)移除测试用例
const delTestCaseUrl = '/htsy-integrated/test-plan/case-del'
axios.get(delTestCaseUrl, {
params: {
planDetailId：this.planDetailId
},
// 序列化数组
paramsSerializer: function(params) {
const keys= params.keys.map(_=>`keys=${_}`).join('&');
return `${keys}` ;
}
}).then((res)=>{
//成功后的处理
});
02. qs插件
1、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 输出结果：'a[0]=b&a[1]=c'
2、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 输出结果：'a[]=b&a[]=c'
3、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 输出结果：'a=b&a=c'
4、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 输出结果：'a=b,c'
03. axios配置
axios.interceptors.request.use(async (config) => {
//只针对get方式进行序列化
if (config.method === 'get') {
config.paramsSerializer = function(params) {
return qs.stringify(params, { arrayFormat: 'repeat' })
}
}
}
04. 小程序
let urlQueryString = qs.stringify(options.params, { //使用到qs ,先下载，后引入
addQueryPrefix: true,
allowDots: true,
arrayFormat: 'repeat'
});
myUrl += urlQueryString;
05. 自定义利用字符串原理（虽然随便但这种感觉最方便~~）
// 这里注意使用+''将参数转换成了字符串,实际上就是把arr变成了字符串传出去
const params = {
arr: [1,2,3,4] + '',
list: [1,2,3,4]+ ''
}
一般用vue，所以用第一种和最后一种比较多，哈哈~~
