如何在Fetch GET请求中传递多个参数？

Fetch本身不像Axios那样提供现成的params配置项自动拼接查询参数，GET请求的参数需要手动添加到URL的查询字符串中，这里有两种可靠的实现方式：

方法1：手动拼接URL（简单场景） #

如果参数内容确定不含特殊字符（如空格、&、=等），可以直接拼接URL：

const depSeq = "your-dep-seq-value";
const workName = "your-work-name-value";

// 直接拼接参数到URL末尾
const requestUrl = `https://your-api-domain.com/target-endpoint?depSeq=${depSeq}&workName=${workName}`;

fetch(requestUrl)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('请求失败:', err));

方法2：使用URLSearchParams（推荐，支持特殊字符编码） #

如果参数可能包含特殊字符，或者想更规范地处理参数，推荐用URLSearchParams自动处理编码和拼接：

const depSeq = "your-dep-seq-value";
const workName = "your-work-name-value";

// 创建参数对象并添加参数
const params = new URLSearchParams();
params.append('depSeq', depSeq);
params.append('workName', workName);

// 构建完整URL
const requestUrl = new URL('https://your-api-domain.com/target-endpoint');
requestUrl.search = params;

fetch(requestUrl)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('请求失败:', err));

也可以简化写法，直接把URLSearchParams实例转为字符串拼到URL后：

const requestUrl = `https://your-api-domain.com/target-endpoint?${params.toString()}`;

补充说明 #

Axios的params本质上也是帮你完成了上述URLSearchParams的自动拼接工作，Fetch没有内置这个功能，所以需要我们手动完成参数到查询字符串的转换。

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