使用 fetch javascript 查询字符串

Posted 2023-02-27

【中文标题】使用 fetch javascript 查询字符串

【英文标题】：Query string with fetch javascript

【发布时间】：2018-11-08 08:25:18

【问题描述】：

我正在做一个项目，我想定义将传递给获取 ex 的 url 对象。 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 中？所以我需要允许用户定义将被传递的方法和查询字符串。提前致谢！

【问题讨论】：

错误是什么？

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

Setting query string using Fetch GET request的可能重复

【参考方案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

【讨论】：

这仅适用于绝对 URL。如果您尝试使用相对 URL，它就会崩溃。

【参考方案2】：

您标记为url_params 的对象被MDN documentation 描述为：

一个选项对象，包含您要应用于请求的任何自定义设置。

然后继续列出您可以在其中包含的属性。

pagingindex 和 pagingresults 不在其中。

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

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

您可能希望使用the URL object 来构造 URL（它将为您处理转义）。

【讨论】：

明确地说，如果要正确使用该对象，则对fetch 的调用应该是fetch(url_object.url, url_object.url_params)。我知道这不是问题的一部分，但对于可能不知道 OP 如何使用的未来读者，可能会将该对象逐字传递给 fetch 并想知道为什么它不起作用。

是的，我知道，当我像你一样通过它时，它工作得很好，但我不想那样硬编码它，因为它需要是动态的。我将尝试使用 URL 对象。