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