async와 await는 자바스크립트의 비동기 처리 문법입니다.
기존의 비동기 처리 방식인 Callback 함수와 Promise의 단점을 보완하는 문법이죠.
async
를 사용하는 방법은 밑의 코드와 같습니다. 함수 앞에 async
를 붙이게 되면 해당 함수는 항상 Promise 객체
를 리턴합니다.
async function number() {
return 1
}
number().then(console.log()) // 1
await
는 항상 async
함수 안에서만 동작합니다. 또한 자바스크립트는 await
키워드를 만나게 되면 Promise
가 처리될 때까지 기다립니다. 그리고 결과는 그 이후에 반환됩니다.
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function getApple() {
await delay(2000);
return 'apple';
}
async function getBanana() {
await delay(2000);
return "banana"
}
async function pickFruits() {
const apple = await getApple();
const banana = await getBanana();
return `${apple} + ${banana}`
}
앞선 코드를 실행하게 되면 총 4초가 걸리게 됩니다. pickFruits()
함수에서 apple
에 2초, banana
에서 2초 총 4초가 걸리게 되는 것이죠. 그러나 두 함수는 서로에게 영향을 끼치지 않습니다.
코드의 성능을 더 좋게 하기 위해 두 함수를 병렬적으로 처리할 수 있다면 더 좋겠죠?
이를 가능하게 하는 두 가지 방법이 있습니다.
먼저 함수를 변수에 담아 처리하는 겁니다. 변수에 담게 되면 코드 블록이 바로 실행되기 때문입니다.
async function pickFruits() {
const applePromise = getApple();
const bananaPromise = getBanana();
const apple = await applePromise;
const banana = await bananaPromise;
return `${apple} + ${banana}`
}
다음으로 Promise
안에 있는 API를 활용하는 방식입니다. 프로미스 배열을 전달하게 되면 모든 프로미스들이 병렬적으로 처리되어 한꺼번에 모아주는 역할을 하게 됩니다.
function pickAllFruits() {
return Promise.all([getApple(), getBanana()])
.then(fruits => fruits.join(' + '))
}
pickAllFruits().then(console.log);