Wie zeige ich mit async-await in JavaScript und HTML ein zufälliges Katzenbild von einer API auf meiner Webseite an?
P粉617237727
2023-09-04 15:22:47
<p>Ich schreibe ein Programm, das Aufrufe von einer API durchführt, um zufällige Katzenbilder zu erhalten. Ich möchte das Bild auf meiner Webseite anzeigen können, nicht nur die URL in der Konsole. </p>
<p>//Das ist mein HTML (das ist wirklich einfach, aber ich möchte nur, dass die Ausgabe funktioniert)</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="en">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Katzen-Gif</title>
</head>
<Körper>
<div class="container">
<h1>Dies ist ein zufälliges Bild einer Katze!</h1>
</div>
<script src="catGif.js">
</script>
</body>
</html></pre>
<p>//Das ist mein JavaScript</p>
<pre class="brush:php;toolbar:false;">let container = document.querySelector(".container");
asynchrone Funktion apiFunction() {
Warten auf Abruf("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);
}),
(Fehler) =>
console.log(error);
}
}</pre></p>
您没有调用您定义的函数。
<!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>