2023. 1. 6. 22:39ㆍ프론트엔드개발/JavaScript
안녕하세요~ totally 개발자입니다.
async, await
오늘 다룰 부분은 async, await입니다. 저번 시간에는 Promise 객체에 대해 살펴보았는데 Promise가 다소 복잡한 단점이 있는데 이를 더 용이하게 사용할 수 있도록 도와주는 비동기 처리 패턴이라고 간주하시면 됩니다. await는 반드시 async 함수 안에서 동작하도록 되어 있고, async 함수 안에는 await가 포함되어 있지 않아도 되지만 반환될 때는 Promise 객체로 반환되는 특징이 있습니다.
아래 간단한 예제를 확인해보면 testFunc를 async로 선언하여 true를 반환하는 함수가 있을 때 console에서 확인해보면, Promise 객체 <fulfill> 형태로 true가 반환되었음을 보실 수 있습니다.
const testFunc = async () => {
return true;
};
await는 async가 단독으로 사용되었던 것과는 달리 async와 반드시 같이 사용되어야 하는 키워드입니다. async 함수 내에 작동되며 Promise 객체가 처리될 때까지 대기하여 결과를 도출합니다.
아래 fetchData를 async로 함수 선언하였으며 그 안에 저번 시간에 배운 fetch 함수를 호출하여 posts에 있는 데이터들을 불러와서 response 변수에 저장합니다. 다만 이 과정에서 시간이 소요될 수 있기 때문에 await를 사용하여 데이터를 불러올 때까지 대기하여 그 결과를 반환하게 됩니다. 또한 받아온 response를 json으로 변형해주는 작업 또한 시간이 걸릴 수 있기 때문에 await를 사용하여 data에 넣어주고 출력하게 됩니다.
async function fetchData() {
let response = await fetch("https://jsonplaceholder.typicode.com/posts");
let data = await response.json();
console.log(data);
}
당연히 Promise의 resolve, reject처럼 성공 및 오류를 구분할 수 있는데 여기에서는 try, catch 구문을 사용해서 구현하면 됩니다. 아래 전체 소스 코드를 첨부했으니 참고하시면 됩니다. 감사합니다.
https://totallydeveloperproject.000webhostapp.com/api_test/posts2.html
[전체 소스 코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<h1>API FETCH EXAMPLE</h1><br />
<table id="container">
<tr>
<td>User ID</td>
<td>ID</td>
<td>Title</td>
<td>Body</td>
</tr>
</table>
<script>
async function fetchData() {
try {
let response = await fetch("https://jsonplaceholder.typicode.com/posts");
let data = await response.json();
data.forEach(elem => {
document.querySelector("#container").innerHTML += `
<tr>
<td>${elem.userId}</td>
<td>${elem.id}</td>
<td>${elem.title}</td>
<td>${elem.body}</td>
</tr>`;
});
} catch (err) {
document.querySelector("#container").innerHTML += `
<tr>
<td colspan="4">Error occurred.</td>
</tr>
`;
}
}
fetchData();
</script>
</body>
</html>'프론트엔드개발 > JavaScript' 카테고리의 다른 글
| [013] 자바스크립트 (JavaScript) - 스프레드 연산자 사용(Spread Operator) (0) | 2023.03.26 |
|---|---|
| [011] 자바스크립트 (JavaScript) - Promise 사용 (0) | 2023.01.05 |
| [010] 자바스크립트 (JavaScript) - reduce() 함수 사용 (0) | 2023.01.04 |
| [009] 자바스크립트 (JavaScript) - Generator(제너레이터), yield 활용 (0) | 2022.12.28 |
| [008] 자바스크립트 (JavaScript) - Fetch 함수로 API 호출해서 데이터 표시하기 (0) | 2022.12.20 |