JavaScript中使用fetch发送的查询字符串

Question

我正在进行一个项目，想要定义一个URL对象，该对象将被传递给fetch函数。例如: https://t1.testing.com/test/api/v1/blog?pagingindex=0&pagingresults=10

const url_object = {
  url: `https://t1.testing.com/test/api/v1/blog`,
  url_params: {
    method: "POST",
    pagingindex: 0,
    pagingresults: 10
  }
};

当我调用fetch(url_object.url, url_object.url_params)时，出现了错误。我该如何将其合并到fetch中？因此我需要允许用户定义将要传递的方法和查询字符串。先行致谢！

- Jacky

---

什么是错误？ - Get Off My Lawn

你尝试过将相同的URL作为URL参数传递给fetch吗？顺便说一下，fetch不允许在其初始化对象中使用除文档记录之外的属性，并且它需要两个参数：URL，然后是初始化对象。 - Heretic Monkey

可能是使用Fetch GET请求设置查询字符串的重复问题。 - Heretic Monkey

Answer 1

您可以轻松地将字典样式的对象转换为查询参数，做到既拥有蛋糕，又能吃蛋糕：

var url = new URL('https://example.com/');
url.search = new URLSearchParams({blah: 'lalala', rawr: 'arwrar'}); 
console.log(url.toString()); // https://example.com/?blah=lalala&rawr=arwrar

- jfunk

---

这仅适用于绝对URL。如果您尝试相对URL，它将无法正常工作。 - Organic

Answer 2

你标记为url_params的对象在MDN文档中被描述为：一个包含任何你想应用于请求的自定义设置的选项对象。然后它继续列出了你可以在其中包含的属性。其中不包括pagingindex和pagingresults。

查询字符串是URL的一部分。如果你想把数据放在那里，那么就把它放在URL中。

const url_object = {
  url: `https://t1.testing.com/test/api/v1/blog?pagingindex=0&pagingresults=10`,
  url_params: {
    method: "POST"
  }
};

你可以使用URL对象来构建URL（它会为您处理转义）。

- Quentin

---

要明确的是，如果要正确使用该对象，则对fetch的调用应为fetch（url_object.url，url_object.url_params）。我知道这不是问题的一部分，但对于未来可能不知道OP如何使用该对象并且想直接将该对象传递给fetch并想知道为什么它不起作用的读者而言，这一点很重要。 - Heretic Monkey

是的，我知道，当我像你那样传递它时，它可以正常工作，但我不想像那样硬编码，因为它需要是动态的。我会尝试使用URL对象。 - Jacky