|
有个请求，里面的参数有对象数组的情况，原来是 post 请求，后面接口改成 get 请求，那用 axios 请求的参数自然也从 data 改为 params。
第一次修改后的请求情况是这样的：
整个路径
请求参数格式如下
之所以变成 数组[数组里的对象属性]:对象的值 这种格式，是因为之前有做请求拦截 get 请求数组的处理，代码如下：
if (config.method === 'get') {
// 如果是get请求，且params是数组类型如arr=[1,2]，则转换成arr=1&arr=2
config.paramsSerializer = function(params) {
return qs.stringify(params, { arrayFormat: 'repeat' })
}
}
复制代码
但后端要求的数据格式却是这样的 数组[对象在数组中的下标].对象属性:对象的属性值：
很明显差的有点远啊。
然后百度了下，看看能不能从 qs.stringify 方法中找到合适的处理方式。
arrayFormat 数组格式化的方式有如下几个：
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'
复制代码
然后 repeat 的格式就是我一开始用的，很明显不对，于是就一个一个去试其它的了。
indices格式：
indices 的格式看似有点接近了，但接口要的是 .属性，而不是 [属性]，所以这个处理也不行。
brackets格式：
brackets 的格式就完全把下标给去掉了嘛！也不行
comma格式：
comma 的格式就完全是把对象数组化，看不太明白是怎么个数据格式！当然也不行。
所以上诉的方法都不行，只有 indices 格式是看着差不多的。
在不断去查论坛，看到了新的 qs.stringify 用法，看留言貌似给做到我想要的数据格式，代码如下：
qs.stringify(data, { allowDots: true, encode: false })
复制代码
结果请求的参数真的是完全符合后端要求的那种：
可接口还是报400，请求参数还是有问题。
然后截图了两者的请求路径上的参数进行比对：
我的：
后端要求的：
可以明显的看到，后端要求的数据中下标是没用中括号 [] 的。后来查了下，才知道需要做 URL编码处理，想了解具体的 URL编码 知识，可以看 阮一峰的关于编码处理 这个文章。
最后也只是在原来 qs.stringify 的处理上再多一个URL编码处理即可：
if (config.method === 'get') {
// 如果是get请求，且params是数组类型如arr=[1,2]，则转换成arr=1&arr=2
config.paramsSerializer = function(params) {
return encodeURI(qs.stringify(params, { allowDots: true, encode: false }))
}
}
或者
复制代码
JSON.stringify([{column: 'createDate', asc: 'true'}])
复制代码
encodeURI(JSON.stringify(list),'utf-8')
复制代码
JSON.parse(JSON.stringify(props.selectKeys))
复制代码
或者
encodeURIComponent('url路径地址')
encodeURIComponent()：因为在作用与url当作参数传递的时候，如参数出现空格这样的特殊字段，后台只可以读取到空格前的内容，后面内容丢失，造成数据读取失败，但是如果用encodeURIComponent()包裹一下，那会将这些特殊字符进行转义，这样后台就可以成功读取了，所以encodeURIComponent()用于url作为参数传递的场景中使用
复制代码
如果前端转义后端需要解码
复制代码
URLDecoder.decode(sysUserDTO.getOrderBy(), "UTF-8");
复制代码
或者
复制代码
解决方案
自己处理
axios.get("https://www.cnblogs.com/enter",{
params: {
keys：this.tag
},
paramsSerializer: function(params) {
const keys= params.keys.map(_=>`keys=${_}`).join('&');
return `${keys}` ;
}
}).then((res)=>{
//成功后的处理
});
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'
axios配置
axios.interceptors.request.use(async (config) => {
//只针对get方式进行序列化
if (config.method === 'get') {
config.paramsSerializer = function(params) {
return qs.stringify(params, { arrayFormat: 'repeat' })
}
}
}
小程序
let urlQueryString = qs.stringify(options.params, { //使用到qs ,先下载，后引入
addQueryPrefix: true,
allowDots: true,
arrayFormat: 'repeat'
});
myUrl += urlQueryString;
复制代码
上面红线部分编译的内容类似encodeURIComponent编译，但是在有( 和 ) 符号时，encodeURIComponent 不会编译，会直接输出。
而qs.stringify 会编译成 20%22 的数据（具体的记不清了，上次项目就是这个细微的没有注意，一直传后端编译不通过）。
使用 qs.stringify() 序列化以后，调用接口，数据传输模式会自动修改为content-type: application/x-www-form-urlencoded
vue 中的 axios 默认的 content-type是 application/json
也就是 java 后端经常让你把参数放在 body 中的那种格式
传输数据的样式是 requestbody
登录后复制
{
name:xxx,
age:xxx
}
如果使用的qs进行序列化
那么 content-type 就是 application/x-www-form-urlencoded
也就是常说的表单提交
传输数据的样式是 formdata
name:xxx,
age:xxx
urlencoding后是
name=xxx&age=xxx
所以,实际上是否需要用qs去序列化参数完全取决于后端要怎么接受数据
qs的使用场景:
1.使用axios时，交互方式为post，且axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urllencoded'时，前台传入的object或者array需要使用qs.stringify()进行转化
复制代码
直接 使用json.stringify()或者是qs.stringify()的时候，结果为[[],[]],查阅网上资料，原因是二维数组是new了一个数组对象，然后给数组对象设置属性，但是数组序列化的时候之后序列化元素，因此忽略了对象上的属性和值，最方面的是方法是使用一个空数组来存放数值；然后通过JSON.stringify来序列化数组。，此时问题可以解决。
let dataArr =[];
for (let i = 0;i |