async 와 await는 자바스크립트의 비동기 처리 패턴 중 하나입니다. 기존 콜백 함수와 프로미스의 단점을 보완하고 쉽게 사용할 수 있게 해주는 문법입니다.
위에 말했듯이 async와 await는 말그대로 쉽게 사용하게 도와주는 문법입니다.
//비동기 처리를 콜백으로
function logName() {
const user = fetchUser('url주소', function(user){
if (user.id === 1) {
console.log(user.name);
}
});
}
위 같은 함수 logName는 일반적으로 콜백을 사용해야지 코드의 실행 순서를 보장받을 수 있습니다. 하지만 async와 await를 이용하면
//async와 await 사용
async function logName() {
const user = await fetchUser('url주소')
if (user.id === 1) {
console.log(user.name);
}
}
이렇게 알아보기 쉽게 간단히 사용할 수 있습니다.
먼저 함수의 앞에 async라는 예약어를 붙입니다. 그리고 나서 함수의 내부 로직 중 통신을 하는 비동기 처리 코드 앞에 await를 붙입니다.
async function 함수명() {
await 비동기_처리_메서드_명();
}