Comment afficher une image de chat aléatoire provenant d'une API sur ma page Web à l'aide de l'attente asynchrone en JavaScript et HTML ?
P粉617237727
2023-09-04 15:22:47
<p>J'écris un programme qui effectue des appels à partir d'une API pour obtenir des images de chats aléatoires. Je veux pouvoir afficher l'image sur ma page Web, pas seulement l'URL dans la console. </p>
<p>//Voici mon code HTML (c'est vraiment basique mais je veux juste que la sortie fonctionne)</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="fr">
<tête>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<titre>Gif chat</titre>
≪/tête>
<corps>
<div class="conteneur">
<h1>Il s'agit d'une image aléatoire d'un chat !</h1>
</div>
<script src="catGif.js">
</script>
</corps>
</html></pre>
<p>//Voici mon JavaScript</p>
<pre class="brush:php;toolbar:false;">let conteneur = document.querySelector(".container");
fonction asynchrone apiFunction() {
wait fetch("https://api.thecatapi.com/v1/images/search")
.then(res => res.json())
.then((résultat) => {
//éléments = résultat ;
let img = document.createElement("img");
img.src = résultat[0].url;
conteneur.appendChild(img);
}),
(erreur) =>
console.log(erreur);
}
}</pre></p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous n'appelez pas la fonction que vous avez définie.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cat Gif</title> </head> <body> <div class="container"> <h1>This is a random image of a cat!</h1> </div> <script> let container = document.querySelector(".container"); async function apiFunction() { await fetch("https://api.thecatapi.com/v1/images/search") .then(res => res.json()) .then((result) => { //items = result; let img = document.createElement("img"); img.src = result[0].url; container.appendChild(img); }), (error) => { console.log(error); } } // Call the function apiFunction(); </script> </body> </html>