En prenant connaissance du fichier html suivant :
<html>
<head>
<meta charset="ISO">
<title>Requete http avec vue js3 et axios</title>
</head>
<body>
<div id='app'>
<button @click='fetchAPI'>APPEL API</button>
<br/>
La commune de {{objet.nom}} a une population de {{objet.population}} habitants<br/><br/>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="./app.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js" ></script>
</body>
</html>Et du fichier app.js :
const API = "https://geo.api.gouv.fr/communes?codeDepartement=22"
const app = Vue.createApp({
data() {
return {
reponseTableau: [],
objet: {}
}
},
methods : {
async fetchAPI() {
await axios.get(API)
.then((response)=>{
this.reponseTableau = response.data,
this.objet = this.reponseTableau[0]
})
.catch((error)=>{
console.log(error)
})
}
}
});
const vm = app.mount('#app'); // mount spécifie que l'application Vue s'affichera dans la div avec id="app"
Essayer de comprendre le fonctionnement de cette application.
Le fichier html et le fichier js de départ sont fournis en ressources dans \\prof\vue js\td7\ressources.