使用 url 和 urlsearchparams 构建 get 请求可自动编码参数、避免手动拼接错误；通过 searchparams.set/append 批量增删改查，支持多值、json 嵌套与布尔转字符串，再直接传入 fetch 即可。

用 URL 对象配合 fetch 拼接带复杂 query 参数的 GET 请求，核心是让参数自动编码、避免手动拼字符串出错。关键不在 fetch 本身，而在 URL 构建阶段。

用 URL 和 URLSearchParams 自动处理 query 参数

直接操作 URL 实例的 searchParams 属性，它会自动对键值做 URI 编码（比如空格变 %20，中文变 UTF-8 编码），还能轻松增删改查参数，比手拼 ?a=1&b=2 安全得多。

• 创建 URL 实例：const url = new URL('https://api.example.com/list')
• 追加参数：url.searchParams.set('page', '1')、url.searchParams.append('tag', '前端')
• 批量设置（适合对象）：Object.entries({ q: 'js fetch', sort: 'date' }).forEach(([k, v]) => url.searchParams.set(k, v))

处理数组、嵌套或重复参数

URLSearchParams 默认把数组当字符串处理（如 [1,2,3] → "1,2,3"），但实际 API 常需要多个同名参数（?id=1&id=2&id=3）或 JSON 字符串。这时要主动控制：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

• 多值参数：用 append 多次，而不是 set：ids.forEach(id => url.searchParams.append('id', id))
• 嵌套结构（如过滤条件）：先转成 JSON 字符串再设参：url.searchParams.set('filter', JSON.stringify({ status: ['active','pending'] }))
• 布尔值建议显式转字符串：url.searchParams.set('include_meta', String(true))

完整 fetch 调用示例

构建好 URL 后，直接传给 fetch 即可，不用额外处理：

const url = new URL('https://api.example.com/search');
url.searchParams.set('q', 'JavaScript');
url.searchParams.set('per_page', '10');
url.searchParams.append('category', 'web');
url.searchParams.append('category', 'tool');

fetch(url)
  .then(res => res.json())
  .then(data => console.log(data));

生成的请求地址类似：https://api.example.com/search?q=JavaScript&per_page=10&category=web&category=tool，编码和格式全部由浏览器保障。

注意边界情况

有些参数值本身含 &、= 或 #，手动拼接极易出错。URL 构造器能正确处理这些字符；但也要留意：

• 空值或 undefined 会被转成字符串 "undefined"，建议提前过滤：if (val != null) url.searchParams.set(key, val)
• 不需要 encodeURI 或 encodeURIComponent —— URL 和 URLSearchParams 已内置处理
• 如果后端要求 query 在路径里（如 RESTful 风格），那就不能用 searchParams，得走 path 参数或模板字符串

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南