한 개의 html 파일에서 script를 넣어 fetch함수를 이용한 api 호출을 해보았다.
test용으로 호출할 수 있는 api 사이트 중 지브리스튜디오 api 사이트가 있어 사용해보았다.
https://ghibliapi.herokuapp.com/#section/Use-Case
Studio Ghibli API
ghibliapi.herokuapp.com
html 파일 생성하고 아래 코드를 입력 후 실행시켜보자
<!DOCTYPE html>
<html>
<head>
<script>
function getGhibli() {
const config = {
method: "get"
};
fetch("https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49", config)
.then(response => response.json())
.then(data => {
const title = document.createElement("div");
const original_title = document.createElement("div");
const director = document.createElement("div");
title.textContent = data.title;
original_title.textContent = data.original_title;
director.textContent = data.director;
const ghibliInfo = document.getElementById("ghibliInfo");
ghibliInfo.appendChild(title);
ghibliInfo.appendChild(original_title);
ghibliInfo.appendChild(director);
console.log('##### GET GHIBLI', data);
})
.catch(error => console.log("fetch 에러!"));
}
</script>
</head>
<body>
<button onclick="getGhibli()">클릭</button>
<div id="ghibliInfo"></div>
</body>
</html>[실행 결과]
클릭 버튼을 누르면 위의 결과 화면처럼 표시된다.
F12(개발자 도구)를 눌러 콘솔창에서 응답온 api 형식도 볼 수 있다.
[코드 설명]
- script에 getGhibli 함수를 생성하였다.
- config를 정의하여 URL 요청시 필요한 설정을 할 수 있다. 주로 header, method, body를 설정한다.
- 브라우저에서 지원하는 fetch함수를 통해 url을 호출하면서 config 설정을 함께 보낸다.
- .then()은 api 호출시 요청이 완료됐을 경우의 작업을 정의한다. 여러 개 입력할 수 있다.
- 응답에서 title, original_title, director 객체를 불러왔다.
- data에 각 요소를 배치할 div(=document.createElement("div")) 태그를 변수별로 정의해줬다.
- 각 변수에 text(=textContent)를 담았다.
- html body 부분에 ghibliInfo라는 Id와 매치해주기 위해 ghibliInfo 변수를 정의해주었다.
- 해당 변수에 appendChild로 각 객체를 붙인다.
- 정리하자면 클릭버튼 -> getGhibli() 메서드 호출 -> api호출 -> 응답 객체 생성 및 div에 객체할당 -> 출력
'Develop > JavaScript' 카테고리의 다른 글
| [yarn] yarn 버전이 말을 듣지 않을때(yarn set version not working) (4) | 2024.10.23 |
|---|