API Fetch

L'API JavaScript Fetch fournit une interface pour récupérer, de manière asynchrone, des ressources sur un réseau. Son 1er argument (obligatoire) est l'URL offrant la ressource à récupérer. Le 2nd argument est optionnel mais permet de personnaliser la requête (ou effectuer les réglages sur le corps de la requête).

Billet créé le :
24 juin 2022

Le rendu de cette fonction "fetch" est un objet (nommé : promesse) qui a 3 états :

  • pending : en cours
  • fulfilled : terminé (sans erreur)
  • rejected. rejeté

Cet objet possède une méthode "then" qui a pour paramètre la réponse à la requête ( il est possible de chainer plusieurs méthodes "then" pour traiter la réponse selon nos besoins) et une méthode "catch" pour la gestion des erreurs (NB : lorsqu'une erreur est détectée, "then" est ignoré).

Dans l'extrait de code ci-dessous fetch est utilisée avec son seul argument obligatoire, une URL :

fetch("http://localhost/crud.php?op=create&studentName=Pierre&course=informatique");

Pour ne pas afficher les paramètres de l'URL dans la requête, fetch sera utilisée avec l'argument optionnel  de réglage en décrivant la requête.

fetch(
        "http://localhost/crud.php",
         {
                method: "POST",
                headers: {
                         Accept: 'application/json',
                         'Content-Type': 'application/json'
                  },
                body: JSON.stringify({
                                'op': 'create',
                                'studentName' :'Pierre",
                                'course': 'informatique',
                   })
         }
)

Dans l'extrait de code ci-dessus, 3 propriétés caractérisent le réglage :

  • method :
  • headers :
  • body : contient les "variables" de la requête (mise au format JSON dans cet exemple)

Lire ce billet pour en savoir plus sur ces réglages

Gestion de la réponse :

Le traitement de la réponse utilise  un chaînage des  "then"  et "catch". Dans le code ci-dessous, la méthode "then" est appliquée une 1ère fois pour convertir la réponse au format JSON puis une 2ème fois sur l'objet converti. (voir la documentation https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Using_promises)

   fetch(
        "http://localhost/crud.php",
         {
                method: "POST",
                headers: {
                         Accept: 'application/json',
                         'Content-Type': 'application/json'
                  },
                body: JSON.stringify({
                                'op': 'create',
                                'studentName' :'Pierre",
                                'course': 'informatique',
                   })
         }
)
.then((response) => response.json()) /* conversion json   fournit un objet javascript */
.then((data) => { alert(data.Data[1].num)  })
         /* traitement des données issues de la conversion  précédente */
.catch((error) => {
           console.error(error);
    });