axios中get请求参数如何传相同键值

今天开发过程中遇到一个get请求的接口，后端要求传相同的键值，类似这样https://xxx/getListByType?typeCode=1&typeCode=2&typeCode=3&typeCode=4

然后我就写了axios.get('xxx/getListByType?typeCode=1&typeCode=2&typeCode=3&typeCode=4')，但是被优化掉了，最后只剩最后一个typeCode。这有点太智能了吧，但是又不能要求后端改接口，于是上网一顿研究，还问了“c知道”，事实证明它也不知道。于是又参考了其他大神的文章，最后终于解决啦。废话不多说，下面写具体实现：

主要就是需要用到paramsSerializer序列化

1. 把要传的参数构造成如下格式的object

const params = {

  typeCode: [1,2,3,4]

}

2. 安装和引入qs

控制台输入：

npm install qs

代码文件引入：

import qs from 'qs'

3. 使用paramsSerializer

return axios.get(url, {
  params,
  paramsSerializer: function (params: any) {
    return qs.stringify(params, { arrayFormat: 'repeat' })
  },
})

4. 其他get请求格式

return axios(
      Object.assign(
        {
          url: `/xxx/getListByType`,
          method: 'get',
          params,
          paramsSerializer: function (params: any) {
            return qs.stringify(params, { arrayFormat: 'repeat' })
          },
          responseType: 'json',
        },
        config
      )
    ) as any

return axios(
       {
          url: `/xxx/getListByType`,
          method: 'get',
          params,
          paramsSerializer: function (params: any) {
            return qs.stringify(params, { arrayFormat: 'repeat' })
          },
          responseType: 'json',
          config,
        },
    ) as any

5. paramsSerializer序列化，处理数组有如下几个形式

1. qs.stringify({typeCode: [1, 2, 3, 4]}, {indices: false})
 
  结果：typeCode=1&typeCode=2&typeCode=3&typeCode=4

2. qs.stringify({typeCode: [1, 2, 3, 4]}, {arrayFormat: 'repeat'}) 

结果： typeCode=1&typeCode=2&typeCode=3&typeCode=4

3. qs.stringify({typeCode: [1, 2, 3, 4]}, {arrayFormat: 'indices'})
 
结果：typeCode[0]=1&typeCode[1]=2&typeCode[2]=3&typeCode[3]=4

4. qs.stringify({typeCode: [1, 2, 3, 4]}, {arrayFormat: 'brackets'})

结果：typeCode[]=1&typeCode[]=2&typeCode[]=3&typeCode[]=4

我们可以看到1和2都是实现我们想要的结果，用哪种随自己心意。