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

Posted 2023-02-27

【中文标题】使用 React Native 中的 Fetch 获取带有查询字符串的 GET

【英文标题】：GET with query string with Fetch in React Native

【发布时间】：2016-09-10 20:43:58

【问题描述】：

我提出这样的要求：

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

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

【问题讨论】：

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

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

【参考方案2】：

是的，你应该知道，JS 中有几个类可以帮助你方便的一个是https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

例如如果你在 javascript 对象中有参数说

let params = one: 'one', two: 'two'

你可以说这个函数

let queryString = new URLSearchParams()
for(let key in params)
  if(!params.hasOwnkey())continue
  queryString.append(key, params[key])

那么你可以通过说

得到你的格式很好的查询字符串

queryString.toString()

【讨论】：

-1; URLSearchParams 在 React Native 中不存在。使用它的唯一方法是通过 polyfill，而这个答案没有提到这一点。

我认为这个 polyfill 默认通过 whatwg-fetch 包含在 React Native 中，所以 URLSearchParams 应该可以安全使用，至少从 React Native 0.59 开始。

【参考方案3】：

接受的答案有效，但如果您的参数多于一个，则无法概括。我建议以下方法，它也处理数组参数：

let route = 'http://test.url.com/offices/search';
if (method == 'GET' && params) 
  const query = Object.keys(params)
    .map((k) => 
      if (Array.isArray(params[k])) 
        return params[k]
          .map((val) => `$encodeURIComponent(k)[]=$encodeURIComponent(val)`)
          .join('&');
      

      return `$encodeURIComponent(k)=$encodeURIComponent(params[k])`;
    )
    .join('&');

  route += `?$query`;

【参考方案4】：

简答

只需像这样将值替换到 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 does not support 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`);

【参考方案5】：

我对@9​​87654321@ 的回答做了一个小小的重复，这将通过 Airbnb 的 eslint 定义，因为现在许多团队似乎都有这个要求。

function objToQueryString(obj) 
  const keyValuePairs = [];
  for (let i = 0; i < Object.keys(obj).length; i += 1) 
    keyValuePairs.push(`$encodeURIComponent(Object.keys(obj)[i])=$encodeURIComponent(Object.values(obj)[i])`);
  
  return keyValuePairs.join('&');

【参考方案6】：

我处理这个的简单函数：

/**
 * Get query string
 *
 * @param   *   query   query object (any object that Object.entries() can handle)
 * @returns string      query string
 */
function querystring(query = ) 
  // get array of key value pairs ([[k1, v1], [k2, v2]])
  const qs = Object.entries(query)
    // filter pairs with undefined value
    .filter(pair => pair[1] !== undefined)
    // encode keys and values, remove the value if it is null, but leave the key
    .map(pair => pair.filter(i => i !== null).map(encodeURIComponent).join('='))
    .join('&');

  return qs && '?' + qs;


querystring(one: '#@$code', two: undefined, three: null, four: 100, 'fi##@ve': 'text');
// "?one=%23%40%24code&three&four=100&fi%23%23%40ve=text"
querystring();
// ""
querystring('one')
// "?0=o&1=n&2=e"
querystring(['one', 2, null, undefined]);
// "?0=one&1=2&2" (edited)

【参考方案7】：

这是一种 es6 方法

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

在这里，我们接收key: param 形状的查询对象 我们通过这个对象的键进行迭代和归约，构建一个编码查询字符串的数组。 最后我们做一个连接并返回这个可附加的查询字符串。

【讨论】：

虽然我们都知道代码很简单，但还是添加一些解释作为答案。

示例：const data = city:'Amman', country:'Jordan', month: 7, Annual: false; fetch(http://api.aladhan.com/v1/calendarByCity?$getQueryString(data), 方法: "GET" )