Fetch发送带参数的GET请求方法

本文详解了如何使用 URLSearchParams 高效、安全地构造带参数的 GET 请求 URL 并通过 fetch 发起请求，强调其自动编码（完美支持中文及特殊字符）、动态增删参数（append/set/delete 等方法灵活可控）、避免手动拼接导致的乱码与安全风险等核心优势，并说明服务端可直接原生解析，无需额外适配——让前端开发者告别繁琐易错的字符串拼接，写出更健壮、可维护的网络请求代码。

直接把 URLSearchParams 实例传给 fetch 的 url 参数即可，不需要手动拼接字符串。关键在于确保查询参数正确附加到 URL 上，且编码规范。

构造带参数的 URL

URLSearchParams 专门用于生成和解析查询字符串，用它构建 URL 更安全、更可靠：

• 创建实例时可传入对象、数组或原始查询字符串
• 调用 toString() 得到标准编码后的查询字符串（如 name=%E5%BC%A0%E4%B8%89&age=25）
• 用 new URL(url) 修改其 searchParams 属性，再取 href 获取完整地址

示例：

const params = new URLSearchParams({ name: '张三', age: '25' });
const url = new URL('https://api.example.com/users');
url.searchParams = params;

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

避免手动拼接和编码错误

不要用字符串模板或 + 拼接查询参数，尤其含中文、空格、特殊符号时容易出错：

• 错误写法：fetch(`https://api.example.com/users?name=${name}&age=${age}`) —— 中文会乱码，未编码
• 正确做法：交给 URLSearchParams 处理编码，它自动调用 encodeURIComponent

动态增删参数也很方便

URLSearchParams 提供了 append()、set()、delete() 等方法，适合条件性添加参数：

const params = new URLSearchParams();
params.set('page', '1');
if (filter) params.append('category', filter);
if (sort) params.set('sort', sort);

const url = new URL('https://api.example.com/items');
url.searchParams = params;
fetch(url);

服务端接收无额外处理

后端（如 Express、Django、Spring Boot）能原生解析标准查询字符串，无需特殊适配。只要前端发出的是合法 URL，服务端 request 对象里的 query 或 params 字段就能直接读取键值对。

终于介绍完啦！小伙伴们，这篇关于《Fetch发送带参数的GET请求方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！