vue 中 get / delete 传递数组参数方法

在前后端交互的时候，有时候需要通过 get 或者 delete 传递一个数组给后台，但是这样直接传递后台无法接收数据，因为在传递的过程中数组参数会被转译，结果如下：参数：{ name : [ 1, 2, 3 ] } 转译效果：http://aaa...

在前后端交互的时候，有时候需要通过 get 或者 delete 传递一个数组给后台，但是这样直接传递后台无法接收数据，因为在传递的过程中数组参数会被转译，结果如下：

参数：{ name : [ 1, 2, 3 ] }
转译效果：http://aaa.com?name[]=1&name[]=2&name[]=3
目标效果：http://aaa.com?name=1&name=2&name=3

解决办法：
使用 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'

安装

npm install qs

使用

//在 axios 请求拦截器里面
import qs from 'qs'
axios.interceptors.request.use(request => {
  if (request.method === 'delete' || request.method === 'get') {
   request.paramsSerializer = function(params) {
     return qs.stringify(params, { arrayFormat: 'repeat' })
   }
  }
  return request
},(error) =>{
  return Promise.reject(error);
})