使用 Fetch GET 请求设置查询字符串

当我们需要使用 Fetch 进行 HTTP 请求时，我们有时需要在 URL 中添加查询字符串来向服务器传递参数。本文旨在介绍如何使用 Fetch GET 请求设置查询字符串。

什么是查询字符串？

查询字符串是 URL 中的一部分，可以用于向服务器传递数据。查询字符串通常以问号 ? 开始，然后是一个或多个键值对，每个键值对之间用 & 分隔。例如：

https://example.com/search?q=JavaScript&page=1

上面的 URL 中，查询字符串为 ?q=JavaScript&page=1，包含两个键值对：q=JavaScript 和 page=1。

Fetch 的基本使用

在讲解如何设置查询字符串之前，我们先来回顾一下 Fetch 的基本使用。

Fetch 是浏览器内置的 API，用于发送 HTTP 请求和获取响应。Fetch API 提供了一个全局的 fetch() 方法，用于发起一个请求，并返回一个 Promise 对象。例如：

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

上面的代码中，fetch() 方法接受一个 URL 参数，发起一个 GET 请求，并返回一个 Promise 对象。我们可以使用 then() 方法处理响应数据，catch() 方法处理请求错误。

设置查询字符串

接下来，我们将介绍如何使用 Fetch GET 请求设置查询字符串。假设我们要向服务器请求某个博客的文章列表，每页显示 10 条记录，并且需要指定页码和分类参数。我们可以使用查询字符串来传递这些参数。例如：

const page = 1;
const category = 'JavaScript';
const perPage = 10;

fetch(`https://example.com/articles?page=${page}&category=${category}&perPage=${perPage}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

上面的代码中，我们将查询字符串拼接到 URL 后面，使用 & 分隔每个键值对。Fetch API 会将查询字符串自动编码为 URL 编码形式。

总结

本文介绍了如何使用 Fetch GET 请求设置查询字符串。查询字符串是一种向服务器传递参数的简单方式，可以使用键值对的形式组成，并以问号 ? 开始。我们可以使用模板字符串将查询字符串拼接到 URL 后面，也可以使用 URLSearchParams 对象构建查询字符串。通过掌握 Fetch 和查询字符串的基本用法，我们可以更加灵活地进行 HTTP 请求，满足不同的业务需求。

完整示例代码如下：

const page = 1;
const category = 'JavaScript';
const perPage = 10;

fetch(`https://example.com/articles?page=${page}&category=${category}&perPage=${perPage}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31148