在AJAX异步请求为GET方式时，如果需要传递到后台的参数是数组类型，直接通过query的方式会有问题，参数在URL上的展示形式如下：

参数：{name:[‘张三’,'李四','王五','赵六']}

url：https://mp.csdn.net/console/editor/html/108768288

通过query的方式传参，请求url变成了下面这样

https://mp.csdn.net/console/editor/html/108768288?name[]=张三&id[]=李四&id[]=王五&id[]=赵六

这样服务端解析的参数是错误的，下面介绍两种我曾经是用过的方式：

1.直接将参数拼接在url

这种方式简单粗暴，直接遍历name数组，拼接在url后面

let name=[‘张三’,'李四','王五','赵六'];

let str="?"

for(var index in name){
    str+='name='+name[index]+'&'
}

let url='https://mp.csdn.net/console/editor/html/108768288'+str

2.使用qs做参数序列化

qs主要是增加一些安全性的查询字符串解析和序列化字符串的库，详细文档：https://www.npmjs.com/package/qs

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'

其中{ arrayFormat: 'repeat' }的序列化结果满足我们的条件，我们可以在axios请求拦截器中对参数进行序列化配置，具体实现代码如下：

a.安装qs

npm i qs

b.在axios请求方法文件中使用，我的文件名是request.js 

// request.js

import qs from 'qs'

....



axios.interceptors.request.use(async (config) => {
//只针对get方式进行序列化
 if (config.method === 'get') {
  config.paramsSerializer = function(params) {
   return qs.stringify(params, { arrayFormat: 'repeat' })
  }
 }
}