Gestion des réponses et des erreurs dans l'API Fetch
Objectifs
Traiter une réponse à une requête HTTP envoyée avec l'API Fetch
Gérer les erreurs lors de l'utilisation de l'API Fetch
Mise en situation
Fetch utilise le puissant mécanisme des Promises
pour faciliter l'écriture et le traitement des requêtes HTTP. Nous allons voir ici comment utiliser les retours de l'API Fetch pour accéder à la réponse d'une requête ou pour traiter les erreurs.
Méthode : Traiter les réponses
La méthode .fetch()
renvoie une Promise
, c'est donc avec la méthode .then()
qu'il faudra récupérer la réponse.
L'objet réponse passé en paramètre contient plusieurs propriétés et méthodes qui vont aider au traitement :
Response.ok
: propriété qui indique si le statut HTTP est un succès (entre 200 et 299)Response.json()
: méthode qui lit la réponse jusqu'au bout et renvoie unePromise
qui retourne le résultat au format JSONResponse.text()
: méthode qui lit la réponse jusqu'au bout et renvoie unePromise
qui retourne le résultat au format text (USVString)
Il existe d'autres méthodes en fonction du type de la réponse attendue (arrayBuffer
, blob
, formData
). Tous fonctionneront sur le même principe d'une Promise
qui retourne le résultat.
fetch('http://mon-serveur/players')
.then((response) => {
if(response.ok){
return response.json(); // renvoie d'une promise avec comme paramètre la réponse au format json
} else {
console.log(response.status);
}
})
.then((data) => {
console.log(data); //On affiche les données de la réponse au format JSON
});
Méthode : Traiter les erreurs
La méthode .fetch()
renvoie une Promise
, c'est donc avec la méthode .catch()
qu'il faudra récupérer les erreurs.
Lors d'une requête avec l'API Fetch, les erreurs peuvent survenir de deux façons :
Soit c'est l'appel qui n'a pas fonctionné (mauvaise configuration, serveur inaccessible) et c'est avec un
catch
que l'erreur pourra être récupérée,Soit l'appel a eu lieu et c'est au niveau de la réponse qu'il y a une erreur.
fetch('http://mon-serveur/players')
.then((response) => {
if(response.ok){
return response.json();
} else {
//Traitement de l'erreur dans la réponse
console.error("Erreur réponse : " + response.status);
}
})
.then((data) => {
console.log(data);
})
.catch((error) => console.error(error)); //Traitement de l'erreur dans l'appel
Syntaxe : À retenir
L'API Fetch est basée sur le mécanisme des
Promises
: par conséquent, le traitement des réponses aux requêtes HTTP et celui des erreurs se feront avec les méthodes.then()
et.catch()
.Attention à une subtilité avec les méthodes de formatage de la réponse (
.json()
,.text()
...) qui renverront une promesse avec le résultat en paramètre.