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