如何在fetch API中设置查询字符串？现有写法是否最优？

嘿，这个问题问到点子上了！咱们来好好聊聊～

一、怎么在fetch里设置查询字符串？ #

常见的方法有几种，咱们逐个说：

1. 你提到的URLSearchParams基础写法 #

这是标准且可靠的原生写法，它的核心优势是会自动帮你处理参数的URL编码（比如空格、特殊字符这些手动拼接容易踩坑的点）：

const params = new URLSearchParams();
params.set('id', 2);
params.set('word', 'hello');
fetch('https://example.com/?' + params.toString())

不过正如你觉得的，确实有点繁琐——要实例化对象、手动加?、还要调用toString()，步骤有点多。

2. 更简洁的URL对象优化写法 #

用原生URL对象可以省去手动拼接?的麻烦，还能更优雅地管理参数：

// 方式一：逐个设置参数
const url = new URL('https://example.com/');
url.searchParams.set('id', 2);
url.searchParams.set('word', 'hello');

fetch(url);

// 方式二：直接传参数对象
const params = { id: 2, word: 'hello' };
const url = new URL('https://example.com/');
url.search = new URLSearchParams(params);

fetch(url);

这种写法不用操心?的问题，URL对象会自动处理——如果参数为空，不会多余添加?；如果原URL已经有查询字符串，还会自动合并，比手动拼接靠谱多了。

3. 贴近你理想的链式调用写法 #

原生fetch本身不支持.params()这种链式语法，但咱们可以自己封装一个工具函数来实现类似效果：

// 封装一个带参数的fetch工具
function fetchWithParams(url, params, options = {}) {
  const urlObj = new URL(url);
  if (params) {
    urlObj.search = new URLSearchParams(params);
  }
  return fetch(urlObj, options);
}

// 使用起来就很顺手啦
fetchWithParams('https://example.com/', { id: 2, word: 'hello' })
  .then(res => res.json())
  .then(data => console.log(data));

不建议直接修改原生fetch的原型（容易引发全局冲突），自己封装工具函数既安全又能满足你的写法需求。

二、你给出的方案是不是最优？ #

它是正确的方案，但不算最简洁健壮。手动拼接?存在小风险：比如如果原URL本身已经带有查询字符串（比如https://example.com/?foo=bar），再手动加?就会变成https://example.com/?foo=bar?id=2&word=hello，这就出错了。而用URL对象的写法完全不会有这个问题，同时步骤也更少，所以更推荐后者。

内容的提问来源于stack exchange，提问作者mk-tool