Async & Await

1. Async

function fetchUser() {
    return new Promise((resolve, reject) => {
        //do network request in 10 sec....
        resolve('somi');
    })
}

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

promise를 이용하면 위와 같이 표현할 수 있는 것을 async를 활용하면 더욱 깔끔하게 나타낼 수 있다.

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

const user = fetchUser();
user.then(console.log);
console.log(user); //Promise {<fulfilled>: "somi"}

2. Await

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

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

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

아래와 같이 하면 총 2초가 걸린다.

function pickFruit() {
    return getApple().then(apple => {
        return getBanana().then(banana => `${apple}+${banana}`);
    });
}

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

promise를 생성하고 나서 실행하면 병렬적으로 실행되어 1초만에 결과값이 나타남
그러나 이렇게 병렬적으로 실행할 경우 위처럼 코드를 작성하지 않는다.(3번 참조)

async function pickFruit(){
    const promiseApple = getApple();
    const promiseBanana = getBanana();

    const apple = await promiseApple;
    const banana = await promiseBanana;
    return `${apple} + ${banana}`
}
pickFruit().then(console.log); //apple + banana

3. useful promise APIs

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

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

pickOnlyOne().then(console.log) //banana(먼저 실행되는 값만 출력됨)