Interagir avec l'API REST dans le Hook Created
Objectifs
Les objectifs de cette vidéo sont de :
- Comprendre les Lifecycle Hooks dans Vue.js, avec un focus sur le hook Created.
- Apprendre à intégrer une API REST tierce, en l'occurrence RandomUser.me, dans une application Vue.js.
- Utiliser la bibliothèque Axios pour effectuer des requêtes HTTP et gérer les réponses efficacement.
Résumé
Apprenez à utiliser les Lifecycle Hooks de Vue.js, en particulier le hook Created, et découvrez comment interagir avec une API REST pour récupérer des utilisateurs aléatoires.
Description
Dans cette leçon, nous explorons les Lifecycle Hooks de Vue.js, qui permettent d'exécuter du code à des moments précis du cycle de vie d'un composant. Nous nous concentrons sur le hook Created, qui est invoqué juste après la mise à disposition des données définies dans la propriété data du modèle, mais avant que le composant ne soit attaché au DOM.
Pour illustrer l'utilisation de ce hook, nous allons interagir avec l'API REST RandomUser.me pour récupérer des données utilisateur aléatoires au format JSON. Nous utilisons la bibliothèque Axios pour effectuer une requête XMLHttpRequest et gérer les données renvoyées par cette API. Les étapes incluent l'invocation du CDN d'Axios, la récupération des données dans le hook Created, et l'affichage des données des utilisateurs (photo, prénom, nom, email, téléphone) dans une table HTML.
Cette leçon est conçue comme un guide pratique, complété par des exercices et des démonstrations pour vous permettre de mettre en œuvre rapidement les concepts présentés.
Questions fréquentes
Programme détaillé
Module 1 - Premiers pas en Vue3
Module 2 - Les composants Vue JS
Module 3 - Les applications SPA (Single Page Applications)
Module 4 - L'interface en ligne de commande Vue-Cli
Module 5 - Le gestionnaire d'état Vuex
Module 6 - Le gestionnaire d'état Pinia
Module 7 - Persistance des données avec Firebase
Module 8 - Plus loin avec Vue.js 3
