Comment ajouter des paramètres de chaîne de requête aux requêtes GET avec l'API Fetch ?

Manipulation de chaîne de requête dans les requêtes GET avec l'API Fetch

Dans le développement Web moderne, l'API Fetch offre un mécanisme puissant pour effectuer des requêtes HTTP. Un scénario courant consiste à envoyer des requêtes GET avec des chaînes de requête. Cependant, la sémantique d'ajout de paramètres de chaîne de requête diffère de la méthode jQuery $.ajax() populaire.

Question :

Comment une chaîne de requête peut-elle être ajoutée à un Requête GET à l'aide de l'API Fetch ? Par exemple, considérons l'URL suivante :

http://myapi.com/orders?order_id=1

Réponse :

L'API Fetch fournit deux méthodes principales pour ajouter des paramètres de chaîne de requête : URLSearchParams et URL.

Utilisation d'URLSearchParams :

URLSearchParams permet la manipulation des chaînes de requête d'URL. Il offre une interface intuitive pour ajouter, supprimer et interroger des paramètres. Pour construire une chaîne de requête, créez une instance URLSearchParams, ajoutez les paramètres souhaités et convertissez-la en chaîne :

// Using URLSearchParams
var request = new Request({
  url: 'http://myapi.com/orders',
  method: 'GET'
});
var params = new URLSearchParams();
params.append('order_id', 1);
request.url += '?' + params.toString();

À l'aide de l'URL :

Alternativement, le La classe URL peut être utilisée pour manipuler directement les URL. Il fournit des méthodes pour ajouter et récupérer des paramètres :

// Using URL
var request = new Request({
  url: new URL('http://myapi.com/orders'),
  method: 'GET'
});
request.url.searchParams.append('order_id', 1);

Exemple détaillé :

Considérez le scénario suivant : récupérer des commentaires à partir d'une publication spécifique sur une API RESTful . Voici un exemple complet utilisant l'approche URLSearchParams :

// Fetch comments for a specific post using URLSearchParams
async function fetchComments() {
  const postId = 1;
  const url = 'https://jsonplaceholder.typicode.com/comments?' +
    new URLSearchParams({ postId }).toString();
  const response = await fetch(url);
  const comments = await response.json();
  console.log(comments);
}

fetchComments();

En tirant parti de ces techniques, les développeurs peuvent ajouter efficacement des chaînes de requête aux requêtes GET effectuées avec l'API Fetch, leur permettant de transmettre des paramètres supplémentaires aux points de terminaison côté serveur et récupérer les résultats filtrés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!