是否存在可将对象转为数组的查询字符串序列化器（Axios或NPM）

当然有合适的方案啦！你遇到的是Axios默认序列化嵌套对象的格式不符合需求的问题——默认会把嵌套对象转成JSON字符串编码后放到URL里，而你需要的是contact[firstname]这种层级式的查询参数格式。不管是用NPM上的成熟序列化库，还是自定义Axios的序列化规则，都能解决这个问题，下面给你具体实现方法：

方案1：使用NPM的qs库（最推荐） #

qs是专门处理查询字符串的工具库，天生支持嵌套对象转成key[subkey]的格式，而且能处理各种边缘场景（比如忽略null值、处理数组等），很多前端项目都在使用它。

步骤： #

1. 先安装依赖：

npm install qs

2. 在Axios请求中配置paramsSerializer，用qs来处理参数：

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

// 你的参数对象
const params = {
  offset: 0,
  limit: 10,
  sort: null,
  contact: {
    firstname: 'John',
    lastname: 'Doe',
  },
};

// 发起请求
axios.get(ENDPOINT, {
  params: params,
  paramsSerializer: (params) => {
    // skipNulls 选项可以自动忽略值为null的参数（比如你的sort:null就不会出现在URL里）
    return qs.stringify(params, { skipNulls: true });
  },
});

这样生成的请求URL就完全符合你的需求：
{{...ENDPOINT...}}?offset=0&limit=10&contact[firstname]=John&contact[lastname]=Doe

方案2：自定义序列化函数（无需额外依赖） #

如果不想新增第三方依赖，也可以自己写一个简单的递归函数来处理嵌套对象，实现相同的序列化效果：

// 自定义参数序列化函数
const customParamsSerializer = (params) => {
  const parts = [];
  // 编码键值对的工具函数
  const encodePair = (key, value) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;

  // 递归遍历对象的函数
  const traverseParams = (obj, prefix = '') => {
    // 忽略null和undefined的参数
    if (obj === null || typeof obj === 'undefined') return;
    if (typeof obj === 'object') {
      Object.entries(obj).forEach(([key, value]) => {
        // 拼接层级键名，比如contact[firstname]
        const newPrefix = prefix ? `${prefix}[${key}]` : key;
        traverseParams(value, newPrefix);
      });
    } else {
      // 普通值直接加入结果数组
      parts.push(encodePair(prefix, obj));
    }
  };

  traverseParams(params);
  // 把所有键值对用&连接
  return parts.join('&');
};

// 使用自定义序列化器发起请求
axios.get(ENDPOINT, {
  params: params,
  paramsSerializer: customParamsSerializer,
});

这个自定义函数可以根据你的需求灵活调整，比如要不要保留null值、怎么处理数组等。

补充说明 #

Axios默认的paramsSerializer逻辑比较简单，遇到嵌套对象时会直接调用JSON.stringify()把对象转成字符串，再进行URL编码，这就是你看到contact=%7B%22firstname%22:%22John%22,...%7D这种格式的原因。只要替换成上面任意一种序列化方式，就能得到你想要的层级式查询参数啦。

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