Appel API
Pourquoi utiliser une API externe ?
Les API externes permettent de récupérer des données depuis des serveurs distants pour les utiliser dans votre application. Ces données peuvent alimenter des composants Vue et être stockées dans votre store pour une gestion centralisée.
Sans API externe, vous seriez limité aux données locales et ne pourriez pas récupérer des informations en temps réel à partir de sources externes, comme des bases de données ou des services tiers.
Dans notre cours nous allons utiliser une API très simple gratuite et ne nécessitant pas d'authentification. Il s'agit de randomuser.me. Cette API fournit des données aléatoires d'utilisateurs.
Commencer par essayer de récupérer un random user via l'endpoint GET: https://randomuser.me/api/
Axios
Pour interagir avec l'API, nous allons utiliser Axios (un client HTTP)
Installez Axios :
npm install axios
Maintenant qu'axios est installé nous allons créer un fichier qui servira à exécuter les appels axios (donc appels API).
// src/apis/randomUser.api.ts
import axios from 'axios';
export const getRandomUser = async () => {
const response: any = await axios.get(`https://randomuser.me/api/`);
console.log(response.data)
return response.data.results[0]
}
Store de gestion randomUser
Il est de convention de stocker les retours API dans un store afin de centraliser les appels et les données et permettre suite à notre application d'exploiter le backend.
Exemple de store randomuser.store.ts
import {defineStore} from 'pinia';
import {ref} from 'vue';
import {getRandomUser} from "@/apis/randomUser.api.ts";
import type {User} from "@/types/common.type.ts";
export const useRandomUserStore = defineStore('randomUser', () => {
const randomUseGenerated = ref<User | null>(null);
const generateUser = async () => {
const result = await getRandomUser()
randomUseGenerated.value = {name: result.name.first, age: result.dob.age}
};
return {randomUseGenerated, generateUser};
});
Modification du composant App.vue
Maintenant nous allons utiliser ces méthodes pour faire l'appel API
<script lang="ts" setup>
import {ref} from 'vue';
import CounterComponent from './components/Counter.component.vue';
import UserCollection from './components/UserCollection.component.vue';
import type {User} from './types/common.type.ts';
import {NButton, NCard, NText} from 'naive-ui';
import {useRandomUserStore} from "@/stores/randomUser.store.ts";
import {storeToRefs} from "pinia";
const randomUserStore = useRandomUserStore();
const {randomUseGenerated} = storeToRefs(randomUserStore);
const selectedUser = ref<User | null>(null);
const users = ref<User[]>([
{name: 'John', age: 25},
{name: 'Jane', age: 24},
{name: 'Jack', age: 30},
]);
const userReceived = (user: User) => {
selectedUser.value = user;
};
const addUser = async () => {
await randomUserStore.generateUser()
if (randomUseGenerated.value) {
users.value.push(randomUseGenerated.value)
}
};
</script>
<template>
<div
>
<CounterComponent/>
<div>
<n-card v-if="selectedUser" bordered title="Utilisateur sélectionné">
<n-text strong>{{ selectedUser.name }}</n-text>
</n-card>
<UserCollection :users="users" @send-user="userReceived">
<div class="form-group">
<n-button type="primary" @click="addUser">Ajout user Random</n-button>
</div>
</UserCollection>
</div>
</div>
</template>
<style scoped>
div {
margin-top: 2em;
display: block
}
</style>
Cycles de vie des composants
Actuellement, nous utilisons un bouton affin d'appeler la méthode fetchData pour récupérer les données. Cependant, il est recommandé d'utiliser les hooks de cycle de vie pour effectuer des actions spécifiques à un moment donné.
Les hooks de cycle de vie sont des méthodes qui sont appelées à des moments spécifiques du cycle de vie d'un composant. Par exemple, mounted est appelé lorsque le composant est inséré dans le DOM. Vous trouverez la liste de ces hooks ici
Dans notre cas nous choisirons onMounted pour appeler la méthode fetchData lors de l'initialisation du composant.
Ici nous voudrions commencer désormais avec un tableau de users vide mais au lancement de l'application faire un appel API et ajouter un user aléatoire.
onMounted(async () => {
await addUser()
});