Récupérer des images d'une API avec la méthode fetch()
Nous allons récupérer des images de chat d'une API, puis nous allons gérer les erreurs.
Allez sur The Cat APi, et cliquez sur documentation.
Dans Quick start, nous nous servirons de la deuxième url pour récupérer 10 images (vous pouvez changer le nombre).
Nous allons créer trois fichiers :
fetchCat.html
fetchCat.css
fetchCat.js
Notre but : afficher 10 images provenant d'une API.
Avant de commencer à coder, noter ce que vous allez devoir faire pour obtenir les images :
- Allez chercher l'url de l'API
--- comment ? avec la méthode fetch().
- Afficher les images dans le DOM
--- comment? en récupérant l'élément du DOM qui contiendra les images.
- Afficher le message d'erreur
--- comment? en récupérant l'élément du DOM qui contiendra le message d'erreur.
RENDU :
Dans notre fichier Html, nous allons créer une div qui va contenir nos images ainsi qu'une div pour la gestion des erreurs au cas où l'image ne s'afficherait pas.
fetchCat.html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="fetchCat.css">
<title>fetch récupération API</title>
</head>
<body>
<div id="error"></div>
<div id="container"></div>
<script src="fetchCat.js"></script>
</body>
</html>
fetchCat.css
.cat-image {
width: auto;
height: 150px;
margin-right: 20px;
}
fetchCat.js :
const container = document.getElementById('container');
const fetchCatPictures = async() => {
try {
const response = await fetch('https://api.thecatapi.com/v1/images/search?limit=10');
const data = await response.json();
data.forEach(cat => {
const imgElement = document.createElement('img');
imgElement.src = cat.url;
imgElement.classList.add('cat-image');
container.appendChild(imgElement);
});
} catch (error) {
console.log('Une erreur s\'est produite :', error);
}
}
fetchCatPictures();Explication du code ligne par ligne :
La première ligne crée une constante appelée "container" et utilise la méthode getElementById de l'objet document pour sélectionner l'élément HTML avec l'identifiant "container". Cela suppose qu'il y a un élément HTML avec l'ID "container" dans la page HTML.
La deuxième ligne définit une fonction asynchrone appelée "fetchCatPictures" à l'aide de la syntaxe des fonctions fléchées (=>).
À l'intérieur de la fonction "fetchCatPictures", la troisième ligne commence par la déclaration du mot-clé await, qui permet d'attendre que la promesse renvoyée par la fonction fetch soit résolue.
La fonction fetch envoie une requête HTTP GET à l'URL spécifiée (https://api.thecatapi.com/v1/images/search?limit=10) pour obtenir des données sur des images de chats.
La quatrième ligne utilise à nouveau le mot-clé await pour attendre que la réponse de la requête soit convertie en JSON en appelant la méthode json() de l'objet réponse.
Cela renvoie une promesse qui sera résolue avec les données JSON récupérées.
La cinquième ligne déclare une variable "data" pour stocker les données JSON obtenues à partir de la réponse de la requête.
La sixième ligne utilise une boucle forEach pour itérer sur chaque objet "cat" dans le tableau "data". Les données JSON contiennent une liste d'objets représentant des images de chats.
À l'intérieur de la boucle, la septième ligne crée un nouvel élément <img> en utilisant la méthode createElement de l'objet document.
La huitième ligne définit la source de l'image en utilisant la propriété url de l'objet "cat". Cela suppose que chaque objet "cat" dans les données JSON a une propriété "url" contenant l'URL de l'image du chat.
La neuvième ligne ajoute la classe CSS "cat-image" à l'élément <img> en utilisant la méthode classList.add.
La dixième ligne ajoute l'élément <img> en tant qu'enfant de l'élément avec l'ID "container" en utilisant la méthode appendChild. Cela ajoute l'image du chat créée dynamiquement à l'intérieur de l'élément HTML avec l'ID "container".
Le code entre les accolades de la boucle forEach sera exécuté pour chaque objet "cat" dans le tableau "data".
Si une erreur se produit dans les étapes précédentes (par exemple, si la requête échoue ou si la conversion en JSON échoue), le bloc catch sera exécuté. La treizième ligne utilise console.log pour afficher un message d'erreur dans la console du navigateur, qui indique que "Une erreur s'est produite" et affiche l'erreur spécifique.
Enfin, la quatorzième ligne appelle la fonction fetchCatPictures pour démarrer le processus de récupération des images de chat.
