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

Question

我正在提出这样的请求:

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

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

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,   
})

Answer 2

简短的回答

只需将值替换为URL,如下所示:

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

更长的答案

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

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

除非你有信心,someVariable绝对不含有任何&,=或其他特殊字符.

如果您在fetchReact Native之外使用,则可以选择使用编码查询字符串参数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}`);

Answer 3

这是一个 es6 方法

const getQueryString = (queries) => {
    return Object.keys(queries).reduce((result, key) => {
        return [...result, `${encodeURIComponent(key)}=${encodeURIComponent(queries[key])}`]
    }, []).join('&');
};

在这里，我们接收一个查询对象，其形式为key: param 我们迭代并减少该对象的键，构建一个编码查询字符串数组。最后，我们进行连接并返回这个可附加的查询字符串。