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'>HTTP</button>
<br/>
{{reponseObjet}}<br/><br/>
Le {{updated}} le taux du bitcoin est de {{eur.rate_float}} euros<br/>
<!--{{reponseObjet.bpi.USD}}-->
</div>
<script src="https://unpkg.com/vue@next"></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://api.coindesk.com/v1/bpi/currentprice.json"
const app = Vue.createApp({
data() {
return {
reponseObjet : {},
updated : '',
eur : {}
}
},
methods : {
async fetchAPI() {
await axios.get(API)
.then((response)=>{
this.reponseObjet = response.data,
this.updated = response.data.time.updated,
this.eur = response.data.bpi.EUR
})
.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"
Et sachant que l'API "https://api.coindesk.com/v1/bpi/currentprice.json" donne :
_enonce_fichiers/image001.png)
Essayer de comprendre le fonctionnement de cette application.
Le fichier html et le fichier js de départ sont fournis en ressources dans \\prof\Bloc 2\javascript\vue js3\td7(axios)\ressources.