12-1 Inspecter la réponse axios

Afin de traiter la réponse retournée par l'API, il est essentiel de comprendre le format de la réponse.

Quelle belle opportunité pour essayer le débogueur de WebStorm!

1. Premièrement, assignez le retour de l'API à une variable reponse et retournez cette variable comme valeur de retour de la fonction obtenirProjets().

   src/app/pages/projets/projets-index.page.ts

   //...
   
   async obtenirProjets(){
       let url = "/projets";
   
       let reponse = await api.get(url);
       return reponse;
   }

   WebStorm vous dira avec raison que l'assignation est redondante, mais cela est pour supporter notre besoin d'ajouter un breakpoint afin de deboguer.

2. Ensuite, placez un breakpoint dans la marge à gauche à la ligne return response;

Lancer l'application en mode debug

1. Si ce n'est pas déjà fait, démarrer l'application via Angular CLI Server. C'est-à-dire la procédure précédente en cliquant sur la flèche verte dans le haut.
2. Vous devriez voir ceci dans l'en-tête de WebStorm lorsque l'application roule.
3. Cliquez sur la flèche du menu où il est écrit Angular CLI Server et appuyez sur le bouton Debug à la droite de Angular Application
4. Cela devrait lancer un navigateur avec un débogueur d'attaché et au lancement, votre breakpoint devrait être activé.

Fenêtre debug et variable reponse

Vous verrez dans le bas apparaitre une fenêtre avec les variables locales à la fonction dans laquelle le breakpoint se trouve.

Entre autres, on peut voir la variable reponse:

Détail de la variable reponse

La réponse contient deux propriétés importantes:

• data: le contenu de la réponse retournée par le serveur. Il s'agit des données reçues, donc l'élément le plus important. Remarquez que data contient le tableau qui contient les entrées de la table projets.
• status: le code de retour, soit 200 (OK) dans ce cas.

info

Ainsi, pour accéder aux données reçues, il nous faudra accéder à:

• reponse.data

Continuer l'exécution

Pour poursuivre l'exécution, vous pouvez appuyer sur la flèche Resume program dans le débogueur.

Retrait du breakpoint

Pour le moment, vous pouvez retirer le breakpoint en cliquant sur la pastille rouge dans la marge gauche du code.

Vous pouvez aussi sortir du mode debug si vous le voulez.