Théorie - Semaine 12 - Services HTTP et gestion des données - Partie 1

Rappel

Jusqu'a maintenant, les données que nous utilisons sont statiques. Elles ne changeront pas vraiment. Avec ce que nous allons voir aujourd'hui sur les services HTTP, nous allons pouvoir faire des requêtes à des API pour récupérer des données dynamiques et les afficher dans notre application. Nous allons également voir comment gérer ces données de manière efficace dans notre application.

Afin de tester le tout, nous allons utiliser le devoir 11 à titre d'application de base.

Qu'est-ce qu'une requête HTTP?

Requête HTTP

À noter que l'appel au service Web doit se faire lorsque le composant est initialisé et prêt à recevoir des données, ce qui nous poussera à explorer le cycle de vie d'un composant et effectuer des actions lorsqu'il est "prêt".

Finalement, le retour de données n'est pas du tout un format simple comme du texte ou des chiffres, il s'agit d'un format de données plus complexe (JSON), alors il nous faudra une façon de représenter ce format de données dans l'application.

Tous au long de la théorie, nous allons utiliser l'API de gestion d'utilisateur que j'ai créé :

URL de base : http://10.10.0.5:8581
Route (communément appelé endpoint en anglais) :
- /utilisateurs : Méthode GET pour récupérer tous les utilisateurs.
- /utilisateurs/{id} : Méthode GET pour récupérer un utilisateur par son ID.
- /utilisateurs : Méthode POST pour créer un nouvel utilisateur. Les champs suivants sont requis : name, email et password.
- /utilisateurs/{id} : Méthode PUT pour mettre à jour un utilisateur existant. Les champs suivants sont requis : name, email et password.
- /utilisateurs/{id} : Méthode PATCH pour mettre à jour partiellement un utilisateur existant. Les champs suivants sont optionnels : name, email et password.
- /utilisateurs/{id} : Méthode DELETE pour supprimer un utilisateur.

Attention ⚠

Vous devez être connecté au VPN ou être sur le réseau du cégep pour utiliser l'API.

Format de données JSON

Le format de données que nous allons recevoir de l'API est le format JSON (JavaScript Object Notation). C'est un format de données léger et facile à lire qui est largement utilisé pour échanger des données entre un client et un serveur. Le format JSON est basé sur la syntaxe des objets JavaScript, ce qui le rend facile à manipuler dans une application Vue.js.

Essayons de visualiser les donnés que retournes l'API lorsque nous faisons une requête GET à a la route /utilisateurs pour récupérer tous les utilisateurs. Dans votre navigateur, allez à l'URL suivante : http://10.10.0.5:8581/utilisateurs.

Il s'agit de l'URL par défaut et nous voulons accéder à la route /utilisateurs pour récupérer tous les utilisateurs.

Vous devriez avoir un résultat qui ressemble à ceci selon votre navigateur (j'utilise Edge) :

Truc 💡

La case à cocher "Pretty-print" permet de visualiser les données de manière plus lisible en ajoutant des sauts de ligne et des indentations. C'est très utile pour comprendre la structure des données JSON.

À propos de JSON

JSON est un format de données textuel qui représente des objets et des tableaux de manière structurée.
Un objet JSON est défini par des accolades {} et contient des paires clé-valeur. Par exemple :

json

  {
    "id": 1,
    "name": "Jean-Pierre Jean",
    "email": "bbb@bbb.bbb",
    "password": "password"
  }

Un tableau JSON est défini par des crochets [] et contient une liste d'objets ou de valeurs. Par exemple :

json

[
  {
    "id": 1,
    "name": "Jean-Pierre Jean",
    "email": "bbb@bbb.bbb",
    "password": "password"
  },
  {
    "id": 2,
    "name": "Pierre Jean",
    "email": "ccc@ccc.ccc",
    "password": "password"
  },
  {
    "id": 3,
    "name": "Jean-Pierre Jean",
    "email": "ddd@ddd.ddd",
    "password": "password"
  },
  {
    "id": 4,
    "name": "Pierre-Jean Jean",
    "email": "eee@eee.eee",
    "password": "password"
  }
]

Pourquoi le JSON est utiliser? Parce qu'il serait difficile voir impossible de représenter les donnes sous une autres formes.

Information ❗

JSON, qui signifie JavaScript Object Notation, est un format d'échange de données. Il est facile à lire et à écrire pour les humains, mais il est également simple à lire et à analyser pour les machines. JSON est basé sur la notation des objets de JavaScript, mais il est utilisé de manière indépendante de ce langage et peut être employé avec de nombreux autres langages de programmation. C'est pourquoi vous avez surement vu des fichiers .json dans vos autres cours!

JSON est:

Textuel: Ce qui le rend facilement échangeable entre serveurs et clients.
Structuré: Peut représenter des données structurées sous forme de collections de paires clé/valeur (objets) et tableaux.
Flexible: Bien qu'il soit structuré, JSON est flexible dans la représentation des données. Les objets et tableaux peuvent contenir d'autres objets et tableaux, permettant une structure de données hiérarchique.
Léger: Sa syntaxe est concise, ce qui rend les données JSON moins volumineuses par rapport à d'autres formats d'échange de données, comme XML.

JSON et JavaScript

En JavaScript, comme JSON est la notation pour décrire un objet, tout JSON valide peut devenir un objet JavaScript!

Par exemple, il est possible de créer un objet littéral à partir de la représentation JSON d'un utilisateur et ensuite d'accéder à ses différentes propriétés!

javascript

const utilisateur = {
    "id": 1,
    "name": "Jean-Pierre Jean",
    "email": "aaa@aaa.aaa",
    "password": "password"
};

console.log(utilisateur.name); // Affiche "Jean-Pierre Jean"

Initialisation d'un composant Vue avec `onMounted`

Il est courant dans Vue d'effectuer certaines actions lors de l'initialisation du composant, lorsque ce dernier est prêt. C'est le cas des appels aux API.

Il faut importer la fonction onMounted depuis Vue.

vue

<script setup lang="ts">
import { onMounted } from 'vue';
</script>

Ensuite, on utilise la fonction onMounted pour exécuter une fonction lorsque le composant est monté (initialisé et prêt). C'est à l'intérieur de cette fonction que nous allons faire notre appel à l'API pour récupérer les données.

vue

<script setup lang="ts">
import { onMounted } from 'vue';  

onMounted(() => {
    // Appel à l'API pour récupérer les données
    // Affichage de ses donnes dans le composant
});
</script>

Information ❗

La fonction onMounted est appelée par Vue lorsque le composant est "prêt". La fonction accepte en argument elle-même une fonction! Au final, c'est la fonction passée en argument qui sera exécutée. () => {} est une fonction anonyme (ou fonction fléchée). Il s'agit d'un raccourci pour déclarer une fonction.

() est un raccourci pour function()
=> fais le lien entre les deux portions, pour indiquer qu'on déclare et utilise une fonction anonyme
{} est le contenu de la fonction (le code à exécuter)

De façon alternative, on aurait pu définir le tout comme ceci:

onMounted(init)

function init(){

}

C'est équivalent. Peut-être que vous trouvez la deuxième option plus simple et c'est le cas d'une certaine façon. Mais l'utilisation de la fonction anonyme permet d'éviter de déclarer une fonction supplémentaire et vous avez le code à être exécuté au chargement directement avec la fonction onMounted, pas besoin de fouiller dans le code pour trouver, par exemple, la fonction init.

De plus, il s'agit d'une syntaxe que vous verrez énormément dans le monde JavaScript, donc il est pratique d'en connaitre le fonctionnement et l'utilité.

Donc, gardons la première façon avec la fonction anonyme.

Afin de tester, essayer d'ajouter dans notre composant de page de profil une liste statique d'utilisateurs dans la section onMounted et de les afficher dans le template :

vue

<script setup lang="ts">
import { onMounted } from 'vue';

const utilisateurs = [];

onMounted(() => {
    utilisateurs.push(
        { id: 1, name: 'Jean-Pierre Jean', email: 'aaa@aaa.aaa', password: 'password' },
        { id: 2, name: 'Pierre Jean', email: 'bbb@bbb.bbb', password: 'password' }
    );
});
</script>

<template>
    <div>
        <h2>Liste des utilisateurs</h2>
        <ul>
            <li v-for="utilisateur in utilisateurs" :key="utilisateur.id">
                {{ utilisateur.name }} - {{ utilisateur.email }}
            </li>
        </ul>
    </div>
</template>

Malheureusement, cela ne fonctionne pas 🥺 pourquoi?

Pourquoi les utilisateurs ne s'affichent pas?

Parce que nous avons déclaré utilisateurs comme un tableau normal, il n'est pas réactif. Vue ne sait pas que nous voulons que ce tableau soit réactif, donc il ne met pas à jour le DOM lorsque nous ajoutons des utilisateurs à ce tableau.

Il faut utiliser ref!!!

vue

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const utilisateurs = ref([]);

onMounted(() => {
    utilisateurs.push(
        { id: 1, name: 'Jean-Pierre Jean', email: 'aaa@aaa.aaa', password: 'password' },
        { id: 2, name: 'Pierre Jean', email: 'bbb@bbb.bbb', password: 'password' }
    );
});
</script>

Il est également possible d'ajouter async devant la fonction anonyme passée en argument à onMounted pour pouvoir utiliser await à l'intérieur de cette fonction. Cela peut être utile lorsque nous faisons des appels à l'API qui retournent des promesses, comme c'est le cas avec Axios.

Maintenant, tout va s'afficher!

Théorie - Semaine 12 - Services HTTP et gestion des données - Partie 1 ​

Rappel ​

Qu'est-ce qu'une requête HTTP? ​

Format de données JSON ​

À propos de JSON ​

JSON et JavaScript ​