如何在axios的params中配置数组生成带索引的查询字符串？

你需要通过**自定义paramsSerializer**来修改Axios对数组参数的序列化逻辑，具体可以借助qs库（Axios内部本身也依赖这个库），并设置arrayFormat: 'index'选项。

具体实现步骤 #

• 先确认项目中已安装qs，如果没有的话，执行安装命令：npm install qs 或 yarn add qs
• 在GET请求的配置中添加paramsSerializer，用qs.stringify处理参数并指定数组格式为index

示例代码：

import axios from 'axios';
import qs from 'qs';

// 单个请求单独配置
axios.get('/myController/myAction', {
  params: { storeIds: [1, 2, 3] },
  paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'index' })
});

配置后生成的URL就会变成你期望的形式：
http://localhost/api/myController/myAction?storeIds[0]=1&storeIds[1]=2&storeIds[2]=3

全局配置（可选） #

如果希望所有Axios请求都默认使用这种数组序列化方式，可以全局配置一次，后续请求无需重复设置：

import axios from 'axios';
import qs from 'qs';

axios.defaults.paramsSerializer = (params) => qs.stringify(params, { arrayFormat: 'index' });

// 后续请求直接使用即可
axios.get('/myController/myAction', { params: { storeIds: [1,2,3] } });

原理说明 #

Axios默认对数组参数采用brackets格式序列化（即storeIds[]=1这种无索引的形式），而qs库提供了多种数组序列化选项，其中index选项会为数组的每个元素添加对应的下标索引，正好匹配你的需求。

内容的提问来源于stack exchange，提问作者Zin Kun