首页 >web前端 >js教程 >如何使用 Fetch API 将查询字符串附加到我的 GET 请求?

如何使用 Fetch API 将查询字符串附加到我的 GET 请求?

Linda Hamilton
Linda Hamilton原创
2024-10-26 03:21:27894浏览

How can I append query strings to my GET requests using the Fetch API?

使用 Fetch API 进行查询字符串操作

在使用 Fetch API 创建具有自定义查询参数的 GET 请求时,出现了一个相关问题:“如何附加我的请求的查询字符串?”源于定制 GET 请求(如“http://myapi.com/orders?order_id=1”)的迫切需要,查询仍然存在 - Fetch 中是否有相当于 jQuery 的 {order_id: 1} 数据参数?

现代、简洁的解决方案

释放 URLSearchParams 的潜力,出现了一种现代解决方案。利用其 toString() 方法,可以毫不费力地将实例转换为编码的查询字符串,并将其无缝附加到请求 URL:

<code class="javascript">fetch('https://example.com?' + new URLSearchParams({
  foo: 'value',
  bar: 2,
}).toString())</code>

URLSearchParams 精心地将对象转换为所需的查询字符串格式,消除了需要手动编码。或者,可以省略 toString() 调用,利用 JavaScript 在字符串连接时的自动转换。但是,这种方法需要更深入地了解 JavaScript 的内部工作原理。

综合获取示例

要获得完整的说明,请考虑以下示例,该示例使用自定义查询参数执行获取请求:

<code class="javascript">async function doAsyncTask() {
  const url = (
    'https://jsonplaceholder.typicode.com/comments?' +
    new URLSearchParams({ postId: 1 }).toString()
  );

  const result = await fetch(url)
    .then(response => response.json());

  console.log('Fetched from: ' + url);
  console.log(result);
}

doAsyncTask();</code>

释放查询字符串参数

通过使用这些技术,您现在可以使用 Fetch API 轻松地将查询字符串附加到 GET 请求,从而使您能够塑造数据检索精准高效的操作。

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn