💫async, await을 알기전에 먼저 Promise라는 객체를 먼저 알아햐합니다.
그렇다면 Promise란 뭘까요?
프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다.
프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용합니다.
function fetchAuthorName(postId) {
return fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
.then((response) => response.json())
.then((post) => post.userId)
.then((userId) => {
return fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
.then((response) => response.json())
.then((user) => user.name);
});
}
fetchAuthorName(1).then((name) => console.log("name:", name));
근데 여기서 문제점이 있습니다.
- Method Changing 기법을 통해 then() 메소드를 연쇄적으로 호출하고 있는데 동일한 메소드인 then을 호출하고 있어 오류가 생긴다면 몇 번째 then에서 문제가 발생한건지 혼란스러울 수 있습니다.
- Promise를 사용하면 try/catch 대신에 catch() 메서드를 사용하여 예외 처리를 해야합니다. 이 부분이 비동기 코드만 있을 때는 그렇게 거슬리지 않는데, 동기 코드와 비동기 코드가 섞여 있을 경우 예외 처리가 난해해지거나 예외 처리를 누락하는 경우가 생기기 쉽습니다.
- Promise를 병렬 중첩 호출하는 경우가 발생하게 되어 들여쓰기를 했을 때 코드 가독성이 떨어집니다.
그래서 나온 것이 async, await 입니다. 위의 샘플을 함수를 이용해 바꿔보겠습니다.
async function fetchAuthorName(postId) {
const postResponse = await fetch(
`https://jsonplaceholder.typicode.com/posts/${postId}`
);
const post = await postResponse.json();
const userId = post.userId;
const userResponse = await fetch(
`https://jsonplaceholder.typicode.com/users/${userId}`
);
const user = await userResponse.json();
return user.name;
}
fetchAuthorName(1).then((name) => console.log("name:", name));훨씬 가독성이 좋아졌습니다. 이제 한 번 async와 await을 알아보도록 하겠습니다.
async란 무엇일까?
async는 항상 function 앞에 위치하며 function 앞에 Promise를 붙히면 항상 Promise를 반환합니다.
async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환합니다.
<!DOCTYPE html>
<script>
"use strict";
async function f() {
return 1;
}
f().then(alert); // 1
</script>await이 뭔데???!
자바스크립트는 await 키워드를 만나면 Promise가 처리될 때 까지 기다립니다. 결과는 그 이후 반환됩니다!
일반 함수에는 절대 사용할 수 없으며 async 함수 안에서만 사용 가능합니다.
await 함수는 최상위 레벨 코드에 사용할 수 없으나 익명 async함수로 코드를 감싸면 사용할 수 있습니다.
// await는 async 함수 안에서만 동작합니다.
let value = await promise;async/await를 사용하면 promise.then/catch가 거의 필요 없습니다. 하지만 가끔 가장 바깥 스코프에서 비동기 처리가 필요할 때같이 promise.then/catch를 써야만 하는 경우가 생기기 때문에 async/await가 promise 기반으로 한다는 사실을 알고 계셔야 합니다. 여러 작업이 있고, 이 작업들이 모두 완료될 때까지 기다리려면 Promise.all을 활용할 수 있다고 합니다!
