Requête AJAX avec API Fetch

API Fetch permet d'effectuer des requêtes HTTP sur votre application Web. En d'autres termes, on appelle cela faire des requêtes AJAX. C'est la "nouvelle méthode" plus puissante et plus flexible de l'objet XMLHttpRequest.

L'API Fetch utilise la méthode fetch()permettant d'échanger des données avec le serveur de manière asynchrone.

Peux-tu m'en dire plus sur "asynchrone" ?
JavaScript est un langage synchrone. C'est-à-dire qu'il exécute le code au fur et à mesure de la lecture de celui-ci. La méthode asynchrone permet de mettre en file d'attente des opérations (comme des requêtes HTTP) qui s'exécuteront après que le code principal est terminé ses opérations. De cette manière, l'opération en file d'attente ne bloque pas le reste du code.

La méthode "fetch()"

La méthode fetch()prend en paramètre obligatoire le chemin d'une ressource distante ou local où l'on souhaite récupérer en envoyer des données.

Celle-ci nous retournera un objet de type Promise(une promesse) qui se résoudra avec un objet de type Response. La résolution s'effectue dès la réception des entêtes HTTP du serveur distant ou local, et ce, avant même de recevoir le contenu.

Cette promesse peut ne pas être tenue si la requête HTTP n'a pu être exécutée. Par contre, si l'entête HTTP retourne un code erreur comme un 403, 404, 500, ... la promesse sera tenue et vous pourrez traiter l'erreur comme vous le souhaitez dans le bloc .catch().

fetch("https://mon-adresse-web.com")
.then(response => response.json())
.then(response => alert(JSON.stringify(response)))
.catch(error => alert("Erreur : " + error));

Le code ci-dessus montre l'utilisation de la méthode fetch().
En premier argument, l'URL vers une ressource distante, si celle-ci nous retourne des données (hors erreurs), que nous traiterons dans le premier .then()en indiquant le format de données reçues, dans notre cas, le format JSON avec response.json(). Les données sont ensuite envoyées au second .then(),où JSON.stringify()est utilisé pour les transformer en une chaîne JSON pour ensuite les afficher via une alerte alert().

Si jamais une erreur est retournée, celle-ci sera traitée dans le bloc .catch()et afficher dans une alerte alert().

Les options

La méthode fetch()peut aussi prendre des paramètres en second argument. Cet argument est un objet pouvant contenir une ou plusieurs options selon vos besoins :

fetch(url, {
  method: "GET", // POST, PUT, DELETE, etc...
  headers: {
    // la valeur de l'en-tête du type de contenu est généralement définie automatiquement en fonction du corps de la demande
    "Content-Type": "text/plain;charset=UTF-8"
  },
  body: undefined // string, FormData, Blob, BufferSource, ou URLSearchParams
  referrer: "about:client", // ou "" pour retourner aucun référant ou une URL
  referrerPolicy: "no-referrer-when-downgrade", // no-referrer, origin, same-origin...
  mode: "cors", // same-origin, no-cors
  credentials: "same-origin", // omit, include
  cache: "default", // no-store, reload, no-cache, force-cache, or only-if-cached
  redirect: "follow", // manual, error
  integrity: "", // a hash, like "sha256-abcdef1234567890"
  keepalive: false, // true
  signal: undefined, // AbortController pour abandonner la demande
  window: window // null
});

Exemple en méthode GET

Afin de bien comprendre son fonctionnement, voici un exemple de l'utilisation de la méthode fetch() en méthode GET.
Cet exemple récupère des ressources sur le site : https://jsonplaceholder.typicode.com.

fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => response.json())
.then(posts => {
  let ul = document.createElement('ul'); // Création d'un élément HTML "ul"

  // Boucles sur les données
  posts.forEach(post => {
    ul.innerText = `<li>${post.title}</li>`; // Création d'une "li" avec concaténation des données reçues
  });

  document.querySelector('body').append(ul); // Ajoute la liste dans le body du document
})
.catch(error => alert("Erreur : " + error));

Exemple en méthode POST

Un exemple avec la méthode POSTet le passage d'information provenant d'un formulaire. Nous ne faisons qu'envoyer les données, à vous de les traiter sur votre serveur en PHP ou un autre langage.

// objet formData
let formData = new FormData();
formData.append('name', 'demo');
formData.append('password', 'azerty123');

fetch("http://mon-domaine.com/new", {
  method: "POST",
  body: formData
})
.then(response => response.json())
.then(response => alert(response))
.catch(error => alert("Erreur : " + error));

Vous avez aussi la possibilité de passer les informations au format JSON.

fetch("http://mon-domaine.com/new", {
  method: "POST",
  headers: {
   'Accept': 'application/json',
   'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'jane',
    password: 'azerty123'
  })
})
.then(response => response.json())
.then(response => alert(response))
.catch(error => alert("Erreur : " + error));