JavaScript async와 await, 유용한 Promise APIs

1. async

• 오래 걸리는 코드를 비동기적 처리하지 않으면, js 엔진은 동기적인 처리를 하기 때문에 만약 그 뒤로 웹 페이지의 UI를 표시하는 코드가 있다면, 사용자는 오래 걸리는 코드가 다 수행될 때까지 빈 페이지만을 보게 된다.
• 비동기적인 처리가 필요하다.
• async 키워드: 코드블럭이 자동으로 Promise로 변환된다.

// clear style of using promise :)
async function fetchUser() {
    // do network request in 10 secs...
    return 'ellie';
}

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

 

2. await

• await은 async가 붙은 함수 안에서만 사용 가능
• await은 delay가 끝날 때까지 기다려준다.

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

async function getApple() {
    await delay(1000);
    return '🍎';
}

async function getBanana() {
    await delay(1000);
    return '🍌';
}

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

pickFruits().then(console.log);

 

3. await 병렬 처리 with Promise APIs

• 위의 코드는 getApple() 실행 후 getBanana()가 실행되게 된다.
• all(): Promise배열을 전달하게 되면, 모든 Promise들이 병렬적으로 다 받을때까지 모아준다.
• race(): 배열에 전달된 Promise중에서 가장 먼저 값을 return하는 것만 전달한다.

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

function pickOnlyOne() {
    return Promise.race([getApple(), getBanana()]);
}
pickOnlyOne().then(console.log);

 

 

 

참고

youtube 드림코딩 by 엘리

https://www.youtube.com/watch?v=aoQSOZfz3vQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=13