如何在Axios中发送同键多值参数生成指定格式请求URL

要实现你需要的URL格式，核心是把选中的分类、子分类ID数组转成逗号分隔的字符串，再通过Axios发送请求。下面提供两种可靠的实现方式：

方式一：利用Axios params配置 + 自定义序列化（推荐） #

Axios默认会把数组参数序列化为categories[]=1&categories[]=2的格式，我们可以通过paramsSerializer自定义序列化逻辑，改成逗号分隔的形式：

import axios from 'axios';

// 模拟用户选中的ID数组
const selectedCategories = [1, 2];
const selectedSubCategories = [31, 65];

axios.get('https://example.com/api/data', {
  params: {
    categories: selectedCategories,
    subCategories: selectedSubCategories
  },
  paramsSerializer: {
    serialize: (params) => {
      return Object.entries(params)
        .map(([key, value]) => {
          // 数组转逗号分隔字符串，同时处理URL编码
          const encodedValue = Array.isArray(value) 
            ? encodeURIComponent(value.join(',')) 
            : encodeURIComponent(value);
          return `${encodeURIComponent(key)}=${encodedValue}`;
        })
        .join('&');
    }
  }
})
.then(res => console.log('请求成功:', res.data))
.catch(err => console.error('请求失败:', err));

这种方式的优势是：Axios帮你处理基础的参数编码，代码结构清晰，新增参数时无需手动修改URL拼接逻辑。

方式二：手动拼接查询字符串（简单场景适用） #

如果你的参数结构简单，可以直接把数组转成逗号分隔字符串后拼接到URL上：

import axios from 'axios';

const selectedCategories = [1, 2];
const selectedSubCategories = [31, 65];

// 手动拼接并编码参数
const queryParams = [
  `categories=${encodeURIComponent(selectedCategories.join(','))}`,
  `subCategories=${encodeURIComponent(selectedSubCategories.join(','))}`
].join('&');

const requestUrl = `https://example.com/api/data?${queryParams}`;

axios.get(requestUrl)
.then(res => console.log('请求成功:', res.data))
.catch(err => console.error('请求失败:', err));

注意事项 #

• 无论哪种方式，都要使用encodeURIComponent处理参数值，避免特殊字符（比如逗号、空格、中文）导致URL解析错误。
• 如果后端支持，也可以提前确认是否接受数组格式的参数，但根据你的需求，逗号分隔是最直接的实现方式。

内容的提问来源于stack exchange，提问作者Digvijay Singh Thakur