이 테스트용 웹사이트에 들어가면 다음과 같은 정보가 들어 있다.
html 파일에서 API 호출하는 순서
- 테스트용 html 파일을 만든다. html 파일에서 자바스크립트 코드는 <script> 태그 내에서 사용하면 된다.
- 자바스크립트로 <div> 태그에 접근하기 위해 <div> 클래스 이름을 test로 바꾼다.
- <script> 태그 안쪽에서 API를 호출한다.
// test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Webpage description goes here" />
<meta charset="utf-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="" />
<link rel="stylesheet" href="css/style.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div></div>
<script></script>
</body>
</html>
Promise로 API 호출하기
fetch("url")===> 데이터를 가져오려는 사이트 주소를 fetch한다..then(response => response.json())===> response를 json 형태로 바꾼다..then(x => (document.querySelector(".test").textContent = x.title))===> test 클래스에 데이터 title을 집어넣는다.
// Promise로 API 호출하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Webpage description goes here" />
<meta charset="utf-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="" />
<link rel="stylesheet" href="css/style.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div class="test"></div>
<script>
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then(response => response.json())
.then(x => (document.querySelector(".test").textContent = x.title));
</script>
</body>
</html>
async/await으로 API 호출하기
const response = await fetch("url")===> 데이터를 가져오려는 사이트 주소를 fetch한다.const jsonObj = await response.json()===> response를 json 형태로 바꾼다.const title = jsonObj.title===> 변수 title은 데이터 객체의 title이다.document.querySelector(".test").textContent = title===> test 클래스에 title을 집어넣는다.
// async/await으로 API 호출하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Webpage description goes here" />
<meta charset="utf-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="" />
<link rel="stylesheet" href="css/style.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div class="test"></div>
<script>
async function test() {
const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const jsonObj = await response.json();
const title = jsonObj.title;
document.querySelector(".test").textContent = title;
}
test();
</script>
</body>
</html>
axios로 API 호출하기
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>===> 자바스크립트에서 axios를 사용하기 위해 axios 라이브러리를 가져온다.const res = await axios.get("url");===> 데이터를 가져오려는 사이트 주소를 fetch한다.const title = res.data.title===> response의 data에 있는 title 값을 가져온다.document.querySelector(".test").textContent = title===> test 클래스에 title을 집어넣는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Webpage description goes here" />
<meta charset="utf-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="" />
<link rel="stylesheet" href="css/style.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div class="test"></div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
async function test() {
const res = await axios.get("https://jsonplaceholder.typicode.com/todos/1");
const title = res.data.title;
document.querySelector(".test").textContent = title;
}
test();
</script>
</body>
</html>
위 코드에서 console.log(res)의 결괏값은 다음과 같다.
위 코드에서 console.log(res.data)의 결괏값은 다음과 같다.
반응형
