async & await

async & await

async & await은 promise보다 더 간결하고 간편한 그리고 동기적으로 실행한 것처럼 보이게 만들 수 있습니다.

async & await은 새로운 API가 아니라 기존에 존재하는 promise위에 좀 더 간편한 API를 제공합니다.

이렇게 기존에 존재하는 것 위에 또는 감싸서 우리가 좀 더 간편하게 쓸 수 있도록 제공하는 것을 sysntactic sugar(문법적 설탕) 라고 합니다.

async

아래 예시 코드를 봅니다.

async function fetchUser() {
    // do network request in 10 secs..
    return 'minsu';
}

const user = fetchUser();
user.then(console.log);
console.log(user);

• function 앞에 async를 쓰면 함수의 코드블록이 자동으로 promise 형태로 바꾸어줍니다.

await

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple() {
    await delay(3000);
    return 'apple';
}

async function getBanana() {
    await delay(3000);
    return 'banana';
}

• 동기적인 코드를 쓰는 것처럼 await delay(3000) => delay()가 끝날 때까지 기다려라!(await) 그 다음에 'apple'을 리턴

async function pickFruits() {
    const apple = await getApple();
    const banana = await getBanana();
    return `${apple} + ${banana}`;
}

pickFruits().then(console.log);

• async와 await를 이용하여 'apple'과 'banana'를 모두 가져올 수 있습니다.
• 에러 처리는 try {} catch() {}문으로 처리 가능합니다.

위 코드에서 하나 문제점이 있습니다.
delay()가 현재 3초로 설정해놓았는데

const apple = await getApple();
const banana = await getBanana();

이 부분에 동기적으로 한줄씩 읽으니까 총 6초가 걸리겠죠??
하지만 이 둘은 전혀 연관관계가 없기 때문에 각각 따로 만들어주는 것이 좋습니다.
이 말은 apple은 apple대로 banana은 banana대로.

async function pickFruits() {
    const applePromise = getApple();
    const bananaPromise = getBanana();
    const apple = await applePromise;
    const banana = await bananaPromise;
    return `${apple} + ${banana}`;
}

pickFruits().then(console.log);

이렇게 되면 단 3초만에 수행이 끝나게 됩니다. (병렬적 수행 가능!)
하지만 위의 코드는 조금 지저분합니다. 이를 Promise의 API로 해결이 가능합니다.

function pickAllFruits() {
    return Promise.all([getApple(), getBanana()])
    .then(fruits => fruits.join(' + '));
}
pickFruits().then(console.log);

• Promise의 all() API를 사용합니다.

참고 유튜브

드림코딩 by 엘리님!!