JavaScript 및 HTML에서 async-await를 사용하여 내 웹페이지에 API의 임의 고양이 이미지를 표시하려면 어떻게 해야 합니까?
P粉617237727
2023-09-04 15:22:47
<p>저는 임의의 고양이 이미지를 얻기 위해 API를 호출하는 프로그램을 작성하고 있습니다. 콘솔의 URL뿐만 아니라 웹페이지에도 이미지를 표시하고 싶습니다. </p>
<p>//이것은 내 HTML입니다(이것은 정말 기본이지만 출력이 작동하기를 원합니다)</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="ko">
<머리>
<메타 문자 집합="UTF-8">
<메타 이름="뷰포트" content="width=device-width,initial-scale=1.0">
고양이 GIF
</머리>
<본문>
<div class="컨테이너">
<h1>고양이의 무작위 이미지입니다!</h1>
</div>
<script src="catGif.js">
</스크립트>
</body>
</html></pre>
<p>//이것은 내 JavaScript입니다</p>
<pre class="brush:php;toolbar:false;">let 컨테이너 = document.querySelector(".container");
비동기 함수 apiFunction() {
가져오기를 기다립니다("https://api.thecatapi.com/v1/images/search")
.then(res => res.json())
.then((결과) => {
//항목 = 결과;
let img = document.createElement("img");
img.src = 결과[0].url;
컨테이너.appendChild(img);
}),
(오류) =>
console.log(오류);
}
}</pre></p>
정의한 함수를 호출하고 있지 않습니다.