12. JS Basic (async & await)

async & await

Promise를 좀 더 간결하고 동기적으로 실행되는 것 처럼 보이게 만들어줌
clear style of using promise

1. async

• 함수 앞에 async를 붙여주면 번거롭게 promise 사용하지 않아도 된다

• before (Promise)

// 비동기적 처리를 하지 않으면 10초동안 멈춰있음
function fetchUser() {
    return new Promise((resolve, reject) => {
        // do network request in 10 secs...
        resolve('eelkom');
    });
}

const user = fetchUser();
user.then(console.log); // eelkom
console.log(user); // Promise {<fulfilled>: "eelkom"}
// async 사용해도 똑같이 promise return

• After (async)

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

const user = fetchUser();
user.then(console.log); // eelkom
console.log(user); // Promise {<fulfilled>: "eelkom"}
// async 사용해도 똑같이 promise return

2. await

• async가 붙은 함수 안에서만 사용할 수 있음
• 함수가 수행 되는 시간을 기다려줌

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

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

async function getBanana() {
    await delay(1000);
    return 'banana';
}
// ==
/* function getBanana() {
    return delay(3000)
        .then(() => 'banana');
} */
  
// same as CallBack Hell
function pickFruits() {
    return getApple().then(apple => {
        return getBanana.then(banana => `${apple} + ${banana}`);
    });
}
pickFruits().then(console.log); // apple + banana

• same as CallBack Hell 현상 해결책 => async 사용

async function pickFruits() {
    const apple = await getApple();
    const banana = await getBanana();
    return `${apple} + ${banana}`;
}
pickFruits().then(console.log); // apple + banana
// 수행 되는데 2초 걸림(비효율적)

• 비효율적 해결책 => await 병렬 처리통해 해결

// await 병렬 처리통해 해결
async function pickFruits() {
    // when new Promise is created, the executor runs automatically -> 1초만 소요
    const applePromise = getApple(); // promise 만들기
    const bananaPromise = getBanana();
    const apple = await applePromise; // 동기화
    const banana = await bananaPromise;
    return `${apple} + ${banana}`;
}

• 병렬적으로 처리 할 경우 위처럼 지저분하게 만들 필요 없음 => useful Promise APIS 사용

3. useful Promise APIS

• Promise.all()

  모든 Promise들이 병렬적으로 다 받을 때 까지 모아주는 역할

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

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

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

function pickAllFruits() {
    // 모든 Promise들이 병렬적으로 다 받을 때 까지 모아주는 역할
    return Promise.all([getApple(), getBanana()])
        .then(fruits => fruits.join(' + ') // 배열 형태로 return 받음, 문자열 합쳐주는 join 사용
    );
}
pickAllFruits().then(console.log); // apple + banana

• Promise.race()

  선착순(먼저 수행되는 Promose 전달)

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

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

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

// Promise.race() -> 선착순(먼저 수행되는 Promose 전달)
function pickOnlyOne() {
    // 선착순(먼저 수행되는 Promose 전달)
    return Promise.race([getApple(), getBanana()]);
}
pickOnlyOne().then(console.log); // banana