get请求传对象数组参数

有个请求，里面的参数有对象数组的情况，原来是 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 的数据（具体的记不清了，上次项目就是这个细微的没有注意，一直传后端编译不通过）。

2. 使用 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<this.scoreDetail.length;i++) {
      dataArr[i] ={};
      dataArr[i]['style_detail'] =this.scoreDetail[i].style_detail;
      dataArr[i]['style_id'] =this.scoreDetail[i].style_id;
      dataArr[i]['point_assess_list'] =this.scoreDetail[i].point_assess_list;
}

最后请求的截图如下，成功变成200请求：