axios中get请求传参为数组/参数序列化

前言：

在使用axios请求的过程中，大家可能会遇到get请求需要传数组的情况：
直接在请求时传参

const params = {
  page: 1,
  size: 10,
  ids: [69, 71]
}
export function getMetricList(params) {
  return axios.get(`/xxx/metrics`, {
    params,
  });
}

此时看到的控制台network中这一项的请求是这样：

直接传数组格式

序列化

axios显示直接传数组去get请求时是 ids[]=69&ids[]=71
我们如果想要没有 [] 连接的格式就需要进行参数序列化：使用qs.stringify,设置axios配置项中的 paramsSerializer

import qs from 'qs';
export function getMetricList(params) {
  return axios.get(`/xxx/metrics`, {
    params,
    paramsSerializer: params => {
      return qs.stringify(params, { indices: false })
    }
  });
}

再次重新请求得到想要的格式：

正确请求格式

扩展: qs

1. qs.stringify

qs.stringify({ids: [1, 2, 3]}, { indices: false })
//  ids=1&ids=2&ids=3

qs.stringify({ids: [1, 2, 3]}, { indices: true })
//  ids[0]=1&ids[1]=2&id[2]=3

qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘repeat‘}) 
// ids=1&ids=2&ids=3

qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘brackets‘})
 // ids[]=1&ids[]=2&ids[]=3

qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘indices‘})
// ids[0]=1&ids[1]=2&ids[2]=3

qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘comma‘}) 
// ids[0]=1&ids[1]=2&ids[2]=3