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éthodeTraiter 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 une Promise qui retourne le résultat au format JSON

  • Response.text() : méthode qui lit la réponse jusqu'au bout et renvoie une Promise 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.

1
fetch('http://mon-serveur/players')
2
    .then((response) => {
3
        if(response.ok){
4
            return response.json(); // renvoie d'une promise avec comme paramètre la réponse au format json
5
        } else {
6
            console.log(response.status);
7
        }
8
    })
9
    .then((data) => {
10
        console.log(data); //On affiche les données de la réponse au format JSON
11
    });

MéthodeTraiter 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.

1
fetch('http://mon-serveur/players')
2
    .then((response) => {
3
        if(response.ok){
4
            return response.json();
5
        } else {
6
            //Traitement de l'erreur dans la réponse
7
            console.error("Erreur réponse : " + response.status);
8
        }
9
    })
10
    .then((data) => {
11
        console.log(data);
12
    })
13
    .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.