问题
前后端端口联调过程中，有个接口需要通过get方法传递数组类型的参数，预期是这样的：
localhost:3000/api/test?names=['lily', 'lucy', 'mark']
实际却是这样的：
后端反馈不好处理，拿参数必须通过names[]的格式获取，而且只能拿到一个，预期的是通过names就可以拿到所有参数。
实际原因是服务器并没有正确读取数组类型的参数，必须通过字符串化的方法进行转化。
解决方案一
通过JSON.stringify的方式处理
解决方案二
axios提供了paramsSerializer序列化函数，可是使用qs提供的方法对参数序列化处理，用于将数组或对象处理成字符串格式，详细参见axios参数序列化
{
// `paramsSerializer` 是一个负责 `params` 序列化的函数
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
}
qs默认的序列化方式为: qs.stringify(params, {arrayFormat: 'brackets'})
qs文档中对arrayFormat的配置有4种策略:
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'
根据项目要求，选择comma的方式处理数组，问题解决了。
axios.get('api/test', {
params: {
names: ['lily', 'lucy', 'mark']
},
paramsSerializer: p => qs.stringfy(p, {arrayFormat: 'comma'})
})
⭐️ 全局配置
如果多个get请求存在需要传递数组的情况，那么每一个接口都需要配置，比较麻烦。axios提供了全局配置的方式，通过axios.defaults即可配置：
import axios from 'axios';
import qs from 'query-string';
// axios 全局配置
axios.defaults.paramsSerializer = params => qs.stringify(params, {arrayFormat: 'comma'});
大功告成👏🏻👏🏻👏🏻
