如何使用 Fetch API 将查询字符串参数附加到 GET 请求？

使用 Fetch API 在 GET 请求中进行查询字符串操作

在现代 Web 开发中，Fetch API 提供了一种用于发出 HTTP 请求的强大机制。一种常见场景涉及发送带有查询字符串的 GET 请求。然而，添加查询字符串参数的语义与流行的 jQuery $.ajax() 方法不同。

问题：

如何将查询字符串添加到使用 Fetch API 获取 GET 请求？例如，考虑以下 URL：

http://myapi.com/orders?order_id=1

答案：

Fetch API 提供了两种用于附加查询字符串参数的主要方法：URLSearchParams 和 URL。

使用 URLSearchParams：

URLSearchParams 允许操作 URL 查询字符串。它提供了一个用于添加、删除和查询参数的直观界面。要构造查询字符串，请创建一个 URLSearchParams 实例，添加所需的参数，并将其转换为字符串：

// Using URLSearchParams
var request = new Request({
  url: 'http://myapi.com/orders',
  method: 'GET'
});
var params = new URLSearchParams();
params.append('order_id', 1);
request.url += '?' + params.toString();

使用 URL：

或者， URL 类可用于直接操作 URL。它提供了添加和检索参数的方法：

// Using URL
var request = new Request({
  url: new URL('http://myapi.com/orders'),
  method: 'GET'
});
request.url.searchParams.append('order_id', 1);

深入示例：

考虑以下场景：从 RESTful API 上的特定帖子中获取评论。以下是使用 URLSearchParams 方法的完整示例：

// Fetch comments for a specific post using URLSearchParams
async function fetchComments() {
  const postId = 1;
  const url = 'https://jsonplaceholder.typicode.com/comments?' +
    new URLSearchParams({ postId }).toString();
  const response = await fetch(url);
  const comments = await response.json();
  console.log(comments);
}

fetchComments();

通过利用这些技术，开发人员可以有效地将查询字符串添加到使用 Fetch API 发出的 GET 请求中，从而使他们能够将其他参数传递到服务器端端点，检索过滤结果。

以上是如何使用 Fetch API 将查询字符串参数附加到 GET 请求？的详细内容。更多信息请关注PHP中文网其他相关文章！