GET с строкой запроса с Fetch in React Native

Ответ 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,   
  body:body
})

Ответ 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()

Ответ 3

Короткий ответ

Просто замените значения в URL-адресе следующим образом:

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

Более длинный ответ

Да, вам просто нужно добавить строку запроса в URL самостоятельно. Вы должны позаботиться о том, чтобы избежать параметров строки запроса, однако - не просто создавать URL-адрес, например

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

если вы не уверены, что someVariable определенно не содержит никаких &, = или других специальных символов.

Если вы использовали fetch вне React 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}`);

Ответ 4

Принятый ответ работает... но если у вас больше параметров, то вы ввернуты. Предлагаю следующий подход:

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}`;
}

EDIT: Обновлен ответ на работу с массивами.