web-dev-qa-db-fra.com

GET avec la chaîne de requête avec Fetch dans React Native

Je fais une demande comme celle-ci:

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

Comment passer des paramètres de chaîne de requête? Est-ce que je les ajoute simplement à l'URL? Je n'ai pas trouvé d'exemple dans docs .

reactjsreact-nativefetch
26
Guy

Votre première pensée était juste: ajoutez-les simplement à l'URL.

N'oubliez pas que vous pouvez utiliser des chaînes de modèle (backticks) pour simplifier l'introduction de variables dans la requête.

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,   
})
39
Ben Clayton

Réponse courte

Remplacez simplement les valeurs dans l'URL comme ceci:

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

Réponse plus longue

Oui, il vous suffit d'ajouter vous-même la chaîne de requête à l'URL. Vous devez prendre soin d'échapper à vos paramètres de chaîne de requête, bien que - ne construise pas une URL similaire à

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

sauf si vous êtes sûr que someVariable ne contient absolument pas de &, =, ou d'autres caractères spéciaux.

Si vous utilisiez fetch en dehors de React Native, vous auriez la possibilité d’encoder les paramètres de chaîne de requête à l’aide de URLSearchParams. . Cependant, React Natif ne supporte pas URLSearchParams . Utilisez plutôt encodeURIComponent .

Par exemple:

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

Si vous souhaitez sérialiser un objet de clés et de valeurs dans une chaîne de requête, vous pouvez créer une fonction utilitaire pour le faire:

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

... et utilisez-le comme ceci:

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

J'ai fait un petit riff sur Mark Amery réponse qui passera les définitions Eslint d'Airbnb puisque de nombreuses équipes semblent avoir cette exigence ces jours-ci.

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

Ma fonction simple pour gérer cela:

/**
 * 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)
1
Ievgen S