Théorie - Semaine 13 - Services HTTP et gestion des données - Partie 2

Quelques concepts clés!

Opération synchrone vs asynchrone

Une opération synchrone est une opération qui bloque l'exécution du programme jusqu'à ce qu'elle soit terminée. Une invite de commande est un excellent exemple d'opération synchrone, car elle attend que l'utilisateur saisisse une commande avant de continuer à exécuter le programme.

Une opération asynchrone, en revanche, est une opération qui ne bloque pas l'exécution du programme. Un excellent exemple d'opération asynchrone est une requête à un service (API), car elle peut prendre plus ou moins de temps tout dépendant de l'opération et de l'état du réseau. Le programme peut continuer à s'exécuter pendant que la requête est en cours.

Les promises

Une promesse est un objet (Promise) qui représente la complétion ou l'échec d'une opération asynchrone

Il s'agit d'un type d'objet qui sera retourné par une fonction asynchrone pour indiquer que l'opération est en cours et qu'elle peut être complétée ou échouer à un moment donné dans le futur.

Pour résoudre ce problème, nous allons utiliser les Async/Await !

Async/Await

L'utilisation de async et await permet d'écrire du code asynchrone de manière plus lisible et plus facile à comprendre.

• async est utilisé pour déclarer une fonction asynchrone. Il s'agit d'une fonction qui peut contenir des opérations asynchrones et qui retourne une promesse.
• await est utilisé pour attendre la résolution d'une promesse. Il peut être utilisé uniquement à l'intérieur d'une fonction déclarée avec async. Lorsque await est utilisé, il suspend l'exécution de la fonction jusqu'à ce que la promesse soit résolue, puis il retourne la valeur résolue.

Voici un exemple simple de fonction asynchrone utilisant async et await pour faire une requête à une API fictive :

async function recupererDonnee() {
    try {
        const reponse = await axios.get('https://api.example.com/data');
        console.log(response.data);
    } catch (erreur) {
        console.error('Error fetching data:', erreur);
    }
}

1. async devant la fonction recupererDonnee indique que c'est une fonction asynchrone.
2. await devant axios.get indique que nous attendons la résolution de la promesse retournée par axios.get. Une fois que la promesse est résolue, la réponse de l'API est stockée dans la variable reponse.
3. Un petit try catch pour gérer le cas ou il y aurait une erreur avec la requête.

Mais qu'est-ce que axios?

Model de données et API

Pour recevoir les données, il nous faut un objet précis. Il doit respecter ce que l'API nous retourne.

Ici, la documentation de l'API nous indique que les données retournées par l'API pour un utilisateur sont les suivantes :

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

Le champ id est généré par l'API et ne doit pas être envoyé dans les requêtes de création ou de mise à jour d'un utilisateur. Les champs name, email et password sont requis pour la création d'un utilisateur, mais ils sont optionnels pour la mise à jour partielle d'un utilisateur.

Nous avons déjà une classe, Utilisateur mais cela ne respecte pas exactement le format de données que nous recevons de l'API. Nous devons effectuer les modifications afin que notre classe Utilisateur corresponde au format de données que nous recevons de l'API. Cela nous permettra de manipuler les données de manière plus efficace dans notre application.

/**
 * Représente un utilisateur avec ses informations
 */
export default class Utilisateur {
    id: number;
    email: string;
    password: string;
    name: string;

    /**
     * Construit un utilisateur avec les informations fournies
     * @param id L'identifiant unique de l'utilisateur
     * @param email L'adresse email de l'utilisateur
     * @param password Le mot de passe de l'utilisateur
     * @param name Le nom complet de l'utilisateur
     */
    constructor(id: number, email: string, password: string, name: string) {
        this.id = id;
        this.email = email;
        this.password = password;
        this.name = name;
    }
}

Axios et appel a l'API

Dans le cadre du cours, nous allons utiliser la bibliothèque Axios pour faire nos appels à l'API. Axios est une bibliothèque JavaScript qui permet de faire des requêtes HTTP depuis le navigateur ou depuis Node.js. Elle est très populaire et facile à utiliser.

Voici quelques avantages d'axios :

• Facile à utiliser : Axios a une syntaxe simple et intuitive pour faire des requêtes HTTP.
• Bonne gestion des erreurs : Axios gère les erreurs de manière efficace, ce qui facilite le débogage.
• Transformation automatique des données en JSON : Axios transforme automatiquement les données en JSON, ce qui facilite la manipulation des données reçues de l'API.
• Possibilité de créer une instance de base : Axios permet de créer une instance avec une URL de base, ce qui facilite la gestion des requêtes vers une API spécifique. (TRÈS UTILE!)

Tous les appels devront être faits dans les services! Il est important de séparer la logique de l'appel à l'API de la logique de l'affichage dans les composants Vue. Les services sont des classes ou des modules qui contiennent des fonctions pour faire des appels à l'API et manipuler les données reçues.

Installation d'axios

Pour installer axios dans votre projet, il nous suffit d'exécuter la commande suivante à la racine de notre projet :

npm install axios

Configuration

http://10.10.0.5:8581/ => Il s'agit de l'url de base de l'api que l'on va utiliser dans les prochains exemples et pour le projet final.

Ensuite, avant de faire notre première requête à l'API, nous allons configurer une instance d'axios avec l'URL de base de notre API. Cela nous permettra de faire des requêtes plus facilement sans avoir à répéter l'URL de base à chaque fois.

Sous src, créer un fichier api.ts et ajoutez le code suivant :

import axios from 'axios';

export const api = axios.create({
    baseURL: 'http://10.10.0.5:8581'
});

Maintenant, tout est prêt! Il ne nous reste plus qu'à faire notre première requête!

Ma première requête

Petit rappel des routes que nous allons utiliser dans les exemples :

• /utilisateurs : GET pour récupérer tous les utilisateurs.
• /utilisateurs/:id : GET pour récupérer un utilisateur par son ID.
• /utilisateurs : POST pour créer un nouvel utilisateur. Les champs suivants sont requis : name, email et password.
• /utilisateurs/:id : PUT pour mettre à jour un utilisateur existant. Les champs suivants sont requis : name, email et password.
• /utilisateurs/:id/:email : PATCH pour mettre à jour le courriel d'un utilisateur existant. Les champs suivants sont requis : email et il sera dans la route directement.
• /utilisateurs/:id : DELETE pour supprimer un utilisateur.

Notre première requête consistera à aller chercher la liste de tous les utilisateurs!

(GET) /utilisateurs

1. Ajouter une fonction dans notre classe UtilisateurService pour faire une requête GET à la route /utilisateurs de notre API.

//1. Ajouter l'import de l'instance d'axios que nous avons configurée dans le fichier api.ts
import { api } from '@/api.ts';
import { Utilisateur } from '@/typings/Utilisateur.ts';

export default class UtilisateurService {
    // 2. Ajouter une fonction pour faire une requête GET à la route /utilisateurs de notre API. La valeur de retour est une promise de recevoir un tableau d'utilisateurs (Promise<Utilisateur[]>).
    async obtenirTousLesUtilisateurs(): Promise<Utilisateur[]> {
        // 3. Il est possible d'apeler une route en get, post, put, patch ou delete en utilisant l'instance d'axios que nous avons configurée.
        // Ici, nous faisons une requête GET à la route /utilisateurs pour récupérer tous les utilisateurs.
        // L'utilisation du await devant l'appel à api.get permet d'attendre la résolution de la promesse retournée par api.get avant de continuer l'exécution du code.
        // Il faut s'assurer de spécifier le type de données que nous attendons de l'API en utilisant la syntaxe générique <Utilisateur> après api.get. Cela permet à TypeScript de savoir que la réponse de l'API sera un tableau d'utilisateurs et de nous fournir une autocomplétion et une vérification de type appropriées.
        const response = await api.get<Utilisateur[]>('/utilisateurs');

        // 4. Par défaut, axios retourne un objet de réponse qui contient plusieurs propriétés, dont data qui contient les données retournées par l'API. Ces données sont déja transformées en JSON par axios, donc nous pouvons les retourner directement! Magique!
        return response.data;
    }
}

Maintenant, dans notre composant, nous allons pouvoir nous servir de notre service afin d'aller récupérer la liste des utilisateurs.

Nous allons créer un composant ExempleApi.vue dans le dossier views. Il faut s'assurer aussi d'ajouter une route dans le fichier router/index.ts pour pouvoir accéder à ce composant depuis notre application.

2. Ajouter le code suivant dans ExempleApi.vue pour faire une requête GET à la route /utilisateurs de notre API et afficher la liste des utilisateurs dans notre composant.

<script setup lang="ts">
  import {onMounted, ref} from 'vue';
  import UtilisateurService from '@/services/UtilisateurService';
  import { Utilisateur } from '@/typings/Utilisateur.ts';

  const utilisateurService = new UtilisateurService();
  const listeUtilisateurs = ref<Utilisateur[]>([]);

  onMounted(async () => {
    // 1. Appeler la fonction obtenirTousLesUtilisateurs de notre service pour récupérer la liste des utilisateurs de l'API.
    // L'utilisation du await devant l'appel à utilisateurService.obtenirTousLesUtilisateurs permet d'attendre la résolution de la promesse retournée par cette fonction avant de continuer l'exécution du code.
    // La liste des utilisateurs retournée par l'API est ensuite stockée dans la variable réactive listeUtilisateurs, ce qui permet à notre composant de réagir aux changements de cette liste et de mettre à jour l'affichage en conséquence.
    // Le .value est nécessaire pour accéder à la valeur réelle de la variable réactive listeUtilisateurs, car ref crée un objet avec une propriété value qui contient la valeur réactive. En assignant la liste des utilisateurs à listeUtilisateurs.value, nous mettons à jour la valeur réactive et déclenchons une mise à jour de l'interface utilisateur pour afficher les utilisateurs récupérés de l'API.
    listeUtilisateurs.value = await utilisateurService.obtenirTousLesUtilisateurs();
  });


</script>

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

Truc 💡

Différence entre l'import import {Utilisateur} from '@/typings/utilisateur'; et import Utilisateur from '@/typings/Utilisateur';

L'utilisation des {} dans l'import indique que nous importons une exportation nommée (named export) depuis le fichier utilisateur.ts. Cela signifie que dans le fichier utilisateur.ts, il doit y avoir une exportation de la classe ou de l'interface Utilisateur qui est déclarée avec le mot-clé export.

L'import sans les {} indique que nous importons une exportation par défaut (default export) depuis le fichier Utilisateur.ts. Cela signifie que dans le fichier Utilisateur.ts, il doit y avoir une exportation de la classe ou de l'interface Utilisateur qui est déclarée avec le mot-clé export default.

(GET) /utilisateurs/:id

1. Ajouter une fonction dans notre classe UtilisateurService pour faire une requête GET à la route /utilisateurs/{id} de notre API afin de récupérer un utilisateur par son ID.

  async obtenirUtilisateurParId(id: number): Promise<Utilisateur> {
    // Appeler la route /utilisateurs/{id}, en GET,  en utilisant l'instance d'axios que nous avons configurée. Nous devons spécifier l'ID de l'utilisateur que nous voulons récupérer dans l'URL de la requête.
    const response = await api.get<Utilisateur>(`/utilisateurs/${id}`);

    return response.data;
  }

Pourquoi je dois mettre l'ID dans l'url de la requête?

C'est comme ça que l'API a été conçue, elle attend que l'ID de l'utilisateur soit spécifié dans l'URL de la requête pour pouvoir identifier quel utilisateur nous voulons récupérer. C'est une convention courante dans les API avec lequel nous allons travailler, d'utiliser des paramètres d'URL pour identifier les ressources spécifiques que nous voulons manipuler.

2. Dans le composant ExempleApi.vue, ajouter un bouton pour chaque utilisateur dans la liste qui, lorsqu'il est cliqué, appelle la fonction obtenirUtilisateurParId de notre service pour récupérer les détails de cet utilisateur et les afficher dans une section dédiée.

<template>
  <div>
    <h1>Liste des utilisateurs</h1>
    <ul>
      <li v-for="utilisateur in listeUtilisateurs" :key="utilisateur.id">
        {{ utilisateur.name }} - {{ utilisateur.email }}
        <button @click="afficherDetails(utilisateur.id)">Afficher les détails</button>
      </li>
    </ul>

    <div v-if="utilisateurDetails">
      <h2>Détails de l'utilisateur</h2>
      <p>Nom: {{ utilisateurDetails.name }}</p>
      <p>Email: {{ utilisateurDetails.email }}</p>
      <p>Mot de passe: {{ utilisateurDetails.password }}</p>
      <p>ID: {{ utilisateurDetails.id }}</p>
    </div>
  </div>
</template>

3. Dans la section script, ajouter la fonction afficherDetails qui appelle la fonction obtenirUtilisateurParId de notre service pour récupérer les détails de l'utilisateur et les stocker dans une variable réactive utilisateurDetails pour les afficher dans le template.

const utilisateurDetails = ref<Utilisateur | undefined>(undefined);

async function afficherDetails(id: number) {
  utilisateurDetails.value = await utilisateurService.obtenirUtilisateurParId(id);
}

(POST) /utilisateurs

(RAPPEL) La route POST /utilisateurs permet de créer un nouvel utilisateur en envoyant les champs name, email et password dans le corps de la requête. Selon la documentation de l'API, l'ID sera créé uniquement par l'API et ne doit pas être envoyé dans la requête et la requête retournera l'utilisateur créé avec son ID généré par l'API.

1. Ajouter une fonction dans notre classe UtilisateurService pour faire une requête POST à la route /utilisateurs de notre API afin de créer un nouvel utilisateur.

  // 1. Le type de retour est une promesse de recevoir un utilisateur (Promise<Utilisateur>), car la route POST /utilisateurs retourne l'utilisateur créé avec son ID généré par l'API.
  async ajouterUtilisateur(name: string, email: string, password: string): Promise<Utilisateur> {
    // 2. Appeler la route /utilisateurs, en POST, en utilisant l'instance d'axios que nous avons configurée. Nous devons envoyer les champs name, email et password dans le corps(body) de la requête.
    // La documentation d'axios que le deuxième argument de la fonction api.post est le corps de la requête (paramètre optionnelle), c'est à dire les données que nous voulons envoyer à l'API. Dans ce cas, nous envoyons un objet contenant les champs name, email et password.
    const response = await api.post('/utilisateurs', {
        name,
        email,
        password
    });

    // 3. Retourne les données retournées par l'API, qui sont l'utilisateur créé avec son ID généré par l'API. Ces données sont déja transformées en JSON par axios, donc nous pouvons les retourner directement! Magique!
    return response.data;
}

Truc 💡

Le corps de la requête (body) est un objet qui contient les données que nous voulons envoyer à l'API. Selon les API, il sera possible d'envoyer des données diverse comme des valeurs primitives ou des objets plus complexes. Dans notre cas, il est plus simple d'envoyer un objet contenant les champs name, email et password pour créer un nouvel utilisateur, plutôt que d'envoyer ces champs séparément. L'API attend un objet avec ces champs dans le corps de la requête pour pouvoir créer l'utilisateur correctement.

2. Dans le composant ExempleApi.vue, ajouter un formulaire pour créer un nouvel utilisateur en utilisant la fonction ajouterUtilisateur de notre service. Pour les besoins de l'exemple, nous n'effectuerons pas de validation avancée sur les champs du formulaire, mais il est important de noter que dans une application réelle, il serait nécessaire d'ajouter une validation appropriée pour s'assurer que les données envoyées à l'API sont correctes.

<template>
  <div>
    <h1>Ajouter un nouvel utilisateur</h1>
    <form @submit.prevent="creerUtilisateur">
      <input v-model="nomAjout" type="text" placeholder="Nom" required />
      <input v-model="courrielAjout" type="email" placeholder="Email" required />
      <input v-model="mdpAjout" type="password" placeholder="Mot de passe" required />
      <button type="submit">Ajouter</button>
    </form> 
    </div>
</template>

3. Dans la section script, ajouter les variables réactives pour les champs du formulaire et la fonction creerUtilisateur qui appelle la fonction ajouterUtilisateur de notre service pour créer un nouvel utilisateur avec les données du formulaire.

const nomAjout = ref('');
const courrielAjout = ref('');
const mdpAjout = ref('');

async function creerUtilisateur() {
  const nouvelUtilisateur = await utilisateurService.ajouterUtilisateur(nomAjout.value, courrielAjout.value, mdpAjout.value);
  console.log('Utilisateur créé:', nouvelUtilisateur);
}

(PUT) /utilisateurs/:id

(RAPPEL) La route PUT /utilisateurs/{id} permet de mettre à jour un utilisateur existant en envoyant les champs name, email et password dans le corps de la requête. Selon la documentation de l'API, l'ID de l'utilisateur à mettre à jour doit être spécifié dans l'URL de la requête et tous les champs sont requis, même si nous ne voulons mettre à jour qu'un seul champ.

1. Ajouter une fonction dans notre classe UtilisateurService pour faire une requête PUT à la route /utilisateurs/{id} de notre API afin de mettre à jour un utilisateur existant.

  async mettreAJourUtilisateur(id: number, name: string, email: string, password: string): Promise<Utilisateur> {
    const response = await api.put(`/utilisateurs/${id}`, {
        name,
        email,
        password
    });

    return response.data;
}

2. Dans le composant ExempleApi.vue, ajouter un formulaire pour mettre à jour un utilisateur existant en utilisant la fonction mettreAJourUtilisateur de notre service. Pour les besoins de l'exemple, nous n'effectuerons pas de validation avancée sur les champs du formulaire, mais il est important de noter que dans une application réelle, il serait nécessaire d'ajouter une validation appropriée pour s'assurer que les données envoyées à l'API sont correctes.

<template>
    <div>
        <h1>Mettre à jour un utilisateur</h1>
        <form @submit.prevent="mettreAJour">
            <input v-model="idModifComplet" type="number" placeholder="ID de l'utilisateur" required />
            <input v-model="nomModifComplet" type="text" placeholder="Nom" required />
            <input v-model="courrielModifComplet" type="email" placeholder="Email" required />
            <input v-model="mdpModifComplet" type="password" placeholder="Mot de passe" required />
            <button type="submit">Mettre à jour</button>
        </form>
    </div>
</template>

3. Dans la section script, ajouter les variables réactives pour les champs du formulaire et la fonction mettreAJour qui appelle la fonction mettreAJourUtilisateur de notre service pour mettre à jour un utilisateur existant avec les données du formulaire.

const idModifComplet = ref(0);
const nomModifComplet = ref('');
const courrielModifComplet = ref('');
const mdpModifComplet = ref('');   

async function mettreAJour() {
  const utilisateurMisAJour = await utilisateurService.mettreAJourUtilisateur(idModifComplet.value, nomModifComplet.value, courrielModifComplet.value, mdpModifComplet.value);
    console.log('Utilisateur mis à jour:', utilisateurMisAJour);
}

(PATCH) /utilisateurs/:id/:email

(RAPPEL) La route PATCH /utilisateurs/{id} permet de mettre à jour partiellement un utilisateur existant en envoyant les champs name, email et password dans le corps de la requête. Selon la documentation de l'API, l'ID de l'utilisateur à mettre à jour doit être spécifié dans l'URL de la requête et tous les champs sont optionnels, ce qui signifie que nous pouvons envoyer uniquement les champs que nous voulons mettre à jour.

1. Ajouter une fonction dans notre classe UtilisateurService pour faire une requête PATCH à la route /utilisateurs/{id} de notre API afin de mettre à jour partiellement un utilisateur existant.

  async modifierPartiellementUtilisateur(id: number, courriel: string): Promise<void> {
    await api.patch(`/utilisateurs/${id}/${courriel}`);
}

Truc 💡

L'utilisation de Partial<Utilisateur> comme type pour le paramètre utilisateur dans la fonction modifierPartiellementUtilisateur indique que nous pouvons envoyer un objet qui contient une partie des champs de l'utilisateur, plutôt que d'être obligé d'envoyer tous les champs comme c'est le cas avec la route PUT. Cela correspond à la nature de la route PATCH, qui permet de mettre à jour partiellement une ressource en envoyant uniquement les champs que nous voulons modifier.

2. Dans le composant ExempleApi.vue, ajouter un formulaire pour mettre à jour partiellement un utilisateur existant en utilisant la fonction mettreAJourPartiellementUtilisateur de notre service. Pour les besoins de l'exemple, nous n'effectuerons pas de validation avancée sur les champs du formulaire, mais il est important de noter que dans une application réelle, il serait nécessaire d'ajouter une validation appropriée pour s'assurer que les données envoyées à l'API sont correctes.

<template>
    <div>
        <h1>Mettre à jour partiellement un utilisateur</h1>
        <form @submit.prevent="mettreAJourPartiellement">
            <input v-model="idModifPartiel" type="number" placeholder="ID de l'utilisateur" required />
            <input v-model="courrielModifPartiel" type="email" placeholder="Email" />
            <button type="submit">Mettre à jour partiellement</button>
        </form>
    </div>
</template>

3. Dans la section script, ajouter les variables réactives pour les champs du formulaire et la fonction mettreAJourPartiellement qui appellent la fonction mettreAJourPartiellementUtilisateur de notre service pour mettre à jour partiellement un utilisateur existant avec les données du formulaire.

const idModifPartiel = ref(0);
const courrielModifPartiel = ref('');
async function mettreAJourPartiellement() {
  const utilisateurMisAJourPartiellement = await utilisateurService.modifierPartiellementUtilisateur(idModifPartiel.value, courrielModifPartiel.value);
    console.log('Utilisateur mis à jour partiellement:', utilisateurMisAJourPartiellement);
}

(DELETE) /utilisateurs/

(RAPPEL) La route DELETE /utilisateurs/{id} permet de supprimer un utilisateur en spécifiant l'ID de l'utilisateur à supprimer dans l'URL de la requête.

1. Ajouter une fonction dans notre classe UtilisateurService pour faire une requête DELETE à la route /utilisateurs/{id} de notre API afin de supprimer un utilisateur.

  async supprimerUtilisateur(id: number): Promise<any> {
    const response = await api.delete(`/utilisateurs/${id}`);
    
    return response;
}

2. Dans le composant ExempleApi.vue, ajouter un bouton pour chaque utilisateur dans la liste qui, lorsqu'il est cliqué, appelle la fonction supprimerUtilisateur de notre service pour supprimer cet utilisateur.

<template>
  <div>
    <h1>Liste des utilisateurs</h1>
    <ul>
      <li v-for="utilisateur in listeUtilisateurs" :key="utilisateur.id">
        {{ utilisateur.name }} - {{ utilisateur.email }}
        <button @click="afficherDetails(utilisateur.id)">Afficher les détails</button>
        <button @click="supprimer(utilisateur.id)">Supprimer</button>
      </li>
    </ul>   
    </div>
</template>

3. Dans la section script, ajouter la fonction supprimer qui appelle la fonction supprimerUtilisateur de notre service pour supprimer un utilisateur.

async function supprimer(id: number) {
  const response = await utilisateurService.supprimerUtilisateur(id);
    console.log('Utilisateur supprimé avec ID:', id);
}

Interpréter la réponse

La réponse que axios nous renvoie est en réalité celle de l'API appelé.

Elle contient plusieurs champs, dont :

• data : Les données retournées par l'API, qui sont déjà transformées en JSON par axios, donc nous pouvons les utiliser directement.
• status : Le code de statut HTTP de la réponse, qui indique si la requête a réussi ou échoué.
• statusText : Le message de statut HTTP de la réponse, qui fournit une description du code de statut.

Status est particuliérement intéressant pour vérifier si notre requête a réussi ou échoué.

Information ❗

Les réponses de l'API peuvent différer, cela dépend comment l'API a été conçue. Il est préférable de se référer au Swagger afin d'avoir une idée claire de ce que l'API retourne comme réponse pour chaque route.

Voici les différents statuts les plus courants que nous pouvons recevoir de l'API :

• 200 OK : La requête a réussi et la réponse contient les données demandées.
• 400 Bad Request : La requête est mal formée ou contient des données invalides.
• 401 Unauthorized : L'authentification est requise pour accéder à la ressource.
• 404 Not Found : La ressource demandée n'a pas été trouvée.
• 500 Internal Server Error : Une erreur s'est produite sur le serveur.

En gros :

• 20X : Succès
• 40X : Erreur du client (nous avons fait une erreur dans la requête)
• 50X : Erreur du serveur (il y a un problème avec l'API)

Authentification à l'API

Afin de réaliser le projet final, nous allons devoir ajouter une authentification pour chaque requête à l'API. Nous allons utiliser l'en-tête (header) de la requête afin de passer notre identifiant.

La manière la plus simple de faire cela est d'ajouter dans le fichier api.ts que nous avons créé précédement une configuration pour ajouter automatiquement l'entête d'authentification à chaque requête faite avec notre instance d'axios.

import axios from 'axios';

export const api = axios.create({
  baseURL: 'http://10.10.0.5:8581',
  headers:{
    'Content-Type': 'application/json',
    'X-User-Id': 'NUMERO_DA'
  }
});

Attention ⚠

Remplacer NUMERO_DA par votre numéro de DA pour que l'API puisse vous identifier et vous permettre d'accéder aux données.

Nous en profitons également pour ajouter l'en-tête Content-Type qui indique que nous envoyons des données au format JSON dans le corps de nos requêtes, ce qui est nécessaire pour que l'API puisse comprendre les données que nous lui envoyons.

Et voilà! Vous êtes prêts à utiliser l'API que je vous ai fourni pour le projet final!

Concept clé

• Promises : Un objet qui représente la complétion ou l'échec d'une opération asynchrone.
• Async/Await : Une syntaxe qui permet d'écrire du code asynchrone de manière plus lisible et plus facile à comprendre.
• Axios : Une bibliothèque JavaScript qui permet de faire des requêtes HTTP depuis le navigateur ou depuis Node.js.
• Body de la requête : Un objet qui contient les données que nous voulons envoyer à l'API dans une requête HTTP.
• En-tête (Header) de la requête : Un objet qui contient des informations supplémentaires sur la requête HTTP, comme les informations d'authentification ou le type de contenu des données envoyées dans le corps de la requête.

Rappel de l'URL de base de l'API : http://10.10.0.5:8581