fetch()

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

• pending : en cours

• fulfilled : terminé (sans erreur)

• rejected : rejeté

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

fetch('https://code.dhumbert.info/json/demo.json')

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

Dans le 1er extrait, l'URL n'a pas de paramètre. Dans le second, elle en a 3 qui sont dans l'ordre  :

1. "op" de valeur "create"  ;

2. "studentName" de valeur "Pierre"  ;

3. "course" de valeur "informatique".

Pour ne pas afficher les paramètres de l'URL dans la requête, fetch pourra être utilisée avec un argument optionnel  de réglage  décrivant la requête comme dans l'exemple ci-après.

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 paires "clé, valeur" caractérisent le réglage :

• la clé "method"  prend les plus souvent les valeurs "POST" ou "GET" ;

• la clé "headers"  définit le type d'encodage des données transmises  ;

• la clé "body"  contient par exemple les "variables" de la requête (mise au format JSON dans cet exemple).

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

La promesse (le rendu de fetch) est un objet qui possède, entre autre, les méthodes "then()" et "catch()" qui permettent de "manipuler" la valeur de sa propriété interne "result".

Then()

 

Accès à la documentation complète.
Le 1er paramètre de "then()" est une fonction dont le paramètre a pour valeur le résultat produit par "fetch()" en cas de réussite.
Le 2nd paramètre est optionnel. Lorsqu'il est présent, c'est une fonction dont le paramètre est l'erreur produite par fetch() en cas d'échec.
then() renvoie une promesse. Il est donc possible, comme le montre le paragraphe suivant,  d'enchainer (le chainage) plusieurs méthodes "then" pour, par exemple, affiner le traitement de la réponse à nos besoins.  
 

catch()

 

Accès à la documentation complète.
Le paramètre de "catch()" est une fonction dont le paramètre a pour valeur l'erreur produite par "fetch()" lors de l'échec.
"catch()" permet donc la gestion des erreurs (NB : lorsqu'une erreur est détectée, "then()" est ignorée).

Le fichier figurant dans l'onglet "demo.json" au bas de cette page  est stockée sur un serveur à l'adresse https://code.dhumbert.info/json/demo.json. 

Grâce au code ci-dessous, je récupère son contenu par le setter "setData" dans la variable "data"   :

const [data, setData] = useState([]);     
fetch('https://code.dhumbert.info/json/demo.json')
           .then( response => response.json() )
           .then( responseJson=> setData(responseJson.results) )
           .catch( error => console.error(error) );

Dans ce code, 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 pour en extraire la valeur de la clé "results" et le stocker dans la variable d'état "data".

En résumé :

• En cas de succès, "fetch()" rends une valeur que j'utiliserai dans l'argument de ma 1^ère fonction fléchée sous l'identifiant "response" dans la 1er application de la méthode "then()" ;

• "then" rends une nouvelle promesse dont j'utilise le résultat comme argument  de ma 2^ème fonction fléchée sous l'identifiant "responseJSON" ;

• "then" (le 2^ème) rends une nouvelle promesse dont on extrait la valeur d'un élément (ici un tableau d'objet).

Voir la documentation https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Using_promises, le billet sur les variables d'état https://dhumbert.info/dev/react/state et l' utilisation des fonctions fléchées pour alléger la syntaxe des fonctions de rappel utilisées.

Le code ci-dessous est équivalent au précédent mais absolument illisible et donc peu facile à maintenir.

const [data, setData] = useState([]);     
fetch('https://code.dhumbert.info/json/demo.json')
           .then(u => u.json())
           .then(u => setData(u.results) )
           .catch(u =>console.error(u));