async
와 await
는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와주는 일종의 키워드라고 할 수 있습니다. 내부의 then()
메소드가 await
로 대체된다고 보면 되겠습니다.
간단한 예제를 살펴보도록 하겠습니다
async function foo() {
await 1
}
위 코드는 아래와 같습니다.
function foo(){
return Promise.resolve(1).then(() => undefined)
}
여기서 async
가 Promise.resolve(1)
를 await
가 .then()
을 비슷하게 사용을 할 수있다고 볼 수 있습니다.
단, await
키워드의 경우 async function
에서만 사용을 할 수 있습니다.
이전 포스팅에서 작성한 starbucks
코드를 async/await
를 사용해 리팩토링 해보도록 하겠습니다.
const starbucks = function (coffeeName) {
return new Promise((resolve, reject) => {
if (coffeeName === '아메리카노') {
resolve('아메리카노 한잔입니다.');
} else {
reject('아메리카노는 없습니다.')
}
})
}
starbucks('아메리')
.then((res) => console.log(res))
.catch((rej) => console.log(rej))
.finally(() => console.log('감사합니다'));
async function americano() {
const result = await starbucks('아메리');
console.log(result);
}
americano()//아메리카노는 없습니다.
then
과 catch
를 함께 사용하고 싶은 경우 아래와 같이 작성을 할 수 있습니다.
async function americano(someDrink) {
try {
const result = await starbucks(someDrink);
return result;
} catch (error) {
console.log('error')
} finally {
console.log('감사합니다')
}
}
americano('아메리')
이렇게 Promise
를 async/await
를 통해 간단하게 작성을 할 수 있습니다. async/await
는 함수 스코프 내에서 자유롭게 코드를 작성할 수 있다는 장점이 있어 더 깔끔하게 코드를 작성할 수 있습니다.
무조건 async/await
가 좋다고 할 수만은 없습니다. 이렇게 한번 코드를 작성하게 되면 이렇게 await
키워드를 한 번 사용한 경우 americano
함수가 사용되는 곳에는 무조건 await
를 붙여줘야하기 때문입니다.
asyn function getDrink() {
await americano('아메리')
}
따라서 사용을 하면서 상황에 맞게 찾아 사용을 하시길 권장드립니다.