reactjs - query - GET con cadena de consulta con Fetch en React Native

react router get params

Question

Estoy haciendo una petición como esta:

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

¿Cómo paso los parámetros de cadena de consulta? ¿Simplemente los agrego a la URL? No pude encontrar un ejemplo en la docs .

Answer 1

Respuesta corta

Simplemente sustituya los valores en la URL de esta manera:

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

Respuesta más larga

Sí, solo necesita agregar la cadena de consulta a la URL. Sin embargo, debe tener cuidado de evitar los parámetros de su cadena de consulta: no solo cree una URL como

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

a menos que esté seguro de que someVariable definitivamente no contiene ningún & , = , u otros caracteres especiales.

Si estuviera usando fetch fuera de React Native, tendría la opción de codificar los parámetros de la cadena de consulta usando URLSearchParams . Sin embargo, React Native no admite URLSearchParams . En su lugar, utilice encodeURIComponent .

Por ejemplo:

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

Si desea serializar un objeto de claves y valores en una cadena de consulta, podría hacer una función de utilidad para hacer eso:

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

... y utilízalo así:

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

Answer 2

Hice un pequeño riff sobre respuesta de que pasará las definiciones de eslint de Airbnb ya que muchos equipos parecen tener ese requisito en estos días.

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(''&'');
}

Answer 3

La respuesta aceptada funciona ... pero si tienes más parámetros estás jodido. Sugiero el siguiente enfoque:

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

EDITAR: respuesta actualizada para trabajar con matrices también

Answer 4

Mi simple función para manejar esto:

/**
 * 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)

Answer 5

Sí, deberías, hay algunas clases en JS, que pueden ayudarte. Una práctica es URLSearchParams

por ejemplo, si tiene los parámetros en un objeto javascript decir

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

podrias decir esta funcion

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

entonces usted puede obtener su cadena de consulta bien formateada diciendo

queryString.toString()

Answer 6

Tu primer pensamiento fue correcto: solo agrégalos a la URL.

Recuerde que puede usar cadenas de plantilla (comillas invertidas) para simplificar la colocación de variables en la consulta.

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