9 juin 2024
Chercher des données via une API
Dans cette formation, nous allons voir comment récupérer les informations d'une API. Il faut prendre en compte qu'une API peut être créé en local avec JavaScript, PHP, etc.. En soit une API est seulement un envoi d'informations sous un format spécifique (JSON, XML).
Ici, nous verrons seulement la méthode “GET”, c'est-à-dire que nous n'allons envoyer aucunes informations à notre API. Nous allons seulement récupérer des informations de celle-ci.
Pour apprendre, nous utiliserons une API gratuite, qui ne fournit pas beaucoup de données, mais qui nous permet quand même d'utiliser les API.
Le lien retourne des données au format JSON. Il contient donc “image” et “link”. Ces noms seront utiles pour la suite.
Déjà, créons une page HTML basique et un fichier JS.
Et insérer le script entre vos balises head du fichier html :
A partir dÀ partir de là, nous sommes prêts à démarrer ! Rendez-vous dans votre fichier JavaScript et créer une fonction asynchrone dans un DOMContentLoaded :
addEventListener("DOMContentLoaded", () => {
async function getApi() { }
});
Le addEventListener("DOMContentLoaded", () => {}); a pour but de faire charger le contenu JavaScript dès que la page à fini de charger tous les éléments (toutes les balises HTML).
Pour récupérer les informations données par l'URL, il va falloir utiliser la méthode fetch() :
async function getApi(){
fetch("https://randomfox.ca/floof/")
.then(response => response.json())
.then(response=>{
console.log(response)
})
.catch(error => console.log("Erreur : " + error));
}
Détaillons rapidement ce code :
fetch("https://randomfox.ca/floof/") Permet de récupérer des données via un lien.
.then(response => response.json()) On récupère le format de notre lien et on lui spécifie que c'est du JSON, notre promesse sera donc retourner au format JSON.
.then(response=>{console.log(response)}) On créer une variable (response) qui prendre les différentes valeurs de notre API, ce qui nous permet d'appeler les attributs de notre API : response.image et response.link
.catch(error => console.log("Erreur : " + error)); Attrape l'erreur et nous l'affiche dans notre console. Donc si le lien de notre API venait d'expirer ou à être mal écrit, nous aurions une erreur :
NB : Si vous avez du XML, mettez au format XML :
fetch("lien au format XML")
.then(response => response.text())
.then(data => {
const parser = new DOMParser();
const xml = parser.parseFromString(data, "application/xml");
console.log(xml);
})
.catch(console.error);
Pour tester si l'API fonctionne, il faut appeler la fonction getApi() :
async function getApi(){
fetch("https://randomfox.ca/floof/")
.then(response => response.json())
.then(response=>{
console.log(response)
})
.catch(error => console.log("Erreur : " + error));
}
getApi()
Ensuite ouvrez le fichier HTML et faite “clique droit > inspecter” et aller dans la console :
On peut constater qu'on a une réponse de notre API, elle nous retourne bien l'image et le lien. Maintenant, on souhaiterait utiliser ses données dans notre fichier HTML et afficher l'image tout en la rendant cliquable. Pour ça, il va falloir créer une balise HTML dans notre body, c'est ici qu'on incorporera notre image cliquable via JavaScript :
<body>
<section id="foxApi"></section>
</body>
Maintenant, rendons-nous de nouveau dans notre fichier JavaScript pour créer notre image. Il faudra récupérer notre nouvelle <section> pour lui insérer une balise <img> :
addEventListener("DOMContentLoaded", () => {
let foxApi = document.getElementById('foxApi')
async function getApi() {
fetch("https://randomfox.ca/floof/")
.then(response => response.json())
.then(response => {
let img = document.createElement("img");
img.setAttribute('src', response.image);
foxApi.appendChild(img);
})
.catch(error => console.log("Erreur : " + error));
}
getApi()
});
Si on actualise notre page HTML, nous aurons bien notre image d'afficher, pour preuve, on peut inspecter le contenu de notre page HTML via l'inspecteur :
Il ne reste plus qu'à rendre l'image cliquable :
addEventListener("DOMContentLoaded", () => {
let foxApi = document.getElementById('foxApi')
async function getApi() {
fetch("https://randomfox.ca/floof/")
.then(response => response.json())
.then(response => {
let img = document.createElement("img");
let link = document.createElement("a");
link.setAttribute('href', response.link);
img.setAttribute('src', response.image);
link.appendChild(img);
foxApi.appendChild(link);
})
.catch(error => console.log("Erreur : " + error));
}
getApi()
});
Notre image est cliquable. Nous avons réussi à rendre dynamique notre page HTML.
J'espère que vous avez appris des choses !
Mots clés:
Cours Du Dev
Recevez les dernières formations disponibles en vous inscrivant à la newsletter
Créé par arkunis