Ajout de chaîne de requête dans les requêtes Fetch GET

Tout en explorant les capacités de chaîne de requête de l'API Fetch, un développeur vise à transmettre des paramètres aux requêtes GET en utilisant une méthode similaire au $ de jQuery .ajax().

Solution

La nouvelle API Fetch utilise URLSearchParams pour gérer l'ajout de chaînes de requête. Cet objet offre un moyen pratique de créer et de modifier les paramètres de chaîne de requête.

fetch('https://example.com?'   new URLSearchParams({
    foo: 'value',
    bar: 2,
}).toString())

La méthode URLSearchParams.toString() encode l'objet paramètre dans une chaîne de requête correctement formatée.

Vous pouvez également omettre l'appel .toString(), car JavaScript contraint automatiquement les objets non-chaînes en chaînes lorsqu'ils sont concaténés avec des chaînes. Notez que cette approche nécessite une compréhension plus approfondie de JavaScript.

Exemple complet

Voici un exemple complet avec des paramètres de requête :

async function doAsyncTask() {
  const url = (
    'https://jsonplaceholder.typicode.com/comments?'  
    new URLSearchParams({ postId: 1 }).toString()
  );

  const result = await fetch(url)
    .then(response => response.json());

  console.log('Fetched from: '   url);
  console.log(result);
}

doAsyncTask();