使用 React Native 中的 Fetch 获取带有查询字符串的 GET

Question

我提出这样的要求：

 fetch("https://api.parse.com/1/users", {
  method: "GET",
  headers: headers,
  body: body
})

如何传递查询字符串参数？我只是将它们添加到 URL 中吗？我在 文档 中找不到示例。

原文由 Guy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的第一个想法是正确的：只需将它们添加到 URL。

请记住，您可以使用模板字符串（反引号）来简化将变量放入查询的过程。

 const data = {foo:1, bar:2};

fetch(`https://api.parse.com/1/users?foo=${encodeURIComponent(data.foo)}&bar=${encodeURIComponent(data.bar)}`, {
  method: "GET",
  headers: headers,
})

原文由 Ben Clayton 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

简答

只需将值替换为 URL，如下所示：

 const encodedValue = encodeURIComponent(someVariable);
fetch(`https://example.com/foo?bar=${encodedValue}`);

更长的答案

是的，您只需要自己将查询字符串添加到 URL。不过，您应该注意转义您的查询字符串参数 - 不要 只是构造一个 URL

 `https://example.com/foo?bar=${someVariable}`

除非您确信 someVariable 绝对不包含任何 & 、 = 或其他特殊字符。

如果您在 React Native 之外使用 fetch ，您可以选择使用 URLSearchParams 对查询字符串参数进行编码。但是，React Native 不支持 URLSearchParams 。相反，使用 encodeURIComponent 。

例如：

 const encodedValue = encodeURIComponent(someVariable);
fetch(`https://example.com/foo?bar=${encodedValue}`);

如果你想将一个键和值的对象序列化为一个查询字符串，你可以创建一个实用函数来做到这一点：

 function objToQueryString(obj) {
  const keyValuePairs = [];
  for (const key in obj) {
    keyValuePairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
  }
  return keyValuePairs.join('&');
}

…并像这样使用它：

 const queryString = objToQueryString({
    key1: 'somevalue',
    key2: someVariable,
});
fetch(`https://example.com/foo?${queryString}`);

原文由 Mark Amery 发布，翻译遵循 CC BY-SA 3.0 许可协议