解决 Axios get 请求数组参数的问题

发表于 更新于 分类于 阅读次数： 本文字数： 122 阅读时长 ≈ 1 分钟

1.问题：get 请求参数为数组时，自动添加了[]，导致后台没有收到请求参数。

1
2
3
4
5
6
axios.get(url, {
  params: {
    tag: [1, 2, 3, 4],
  },
});
// ...tag[]=1&tag[]=2&tag[]=3&tag[]=4

2.解决方案：在 Axios 拦截器中新增如下配置。

1
2
3
4
5
6
7
8
import qs from "qs";

if (config.method === "get") {
  // 如果是get请求，且params是数组类型如arr=[1,2]，则转换成arr=1&arr=2
  config.paramsSerializer = function (params) {
    return qs.stringify(params, { arrayFormat: "repeat" });
  };
}

References
axios 传递数组参数，后台接收不到填坑之旅