Aller au contenu principal


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).

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);
    });