async, await

await : Promise를 좀 더 간편하고 동기적으로 실행되는 것처럼 보이게 하는 syntatic sugar.

clear style of using Promise

체이닝 대신 간편한 방법

• Promise 사용

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

const user = fetchUser();
user.then(console.log); // Promise { 'kim' }
console.log(user); // kim

• async 사용

async function fetchUser() {
    // 코드 블럭이 자동으로 Promise로 변환
    // do network request in 10 secs ...
    resolve('kim');
}

await : async 함수 안에서만 사용

function delay(ms) { // ms초 지나면 resolve 리턴
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple() { // 동기적 코드 쓰는 것처럼
    await delay(2000); // delay 끝날 때까지 기다림. 
    return 'apple!';
}

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

function pick() { // 콜백 지옥 처럼 중첩
    return getApple().then(apple => {
        return getBanana().then(banana => `${apple}, ${banana}`)
    });
}

// 동기적으로 작성하듯. 간단
async function pick2() {
    const apple = await getApple();
    const banana = await getBanana();
    return `${apple}, ${banana}`
}

pick2().then(console.log);

but apple과 banana 순차적으로 진행하면 비효율적(4s). 서로 연관 되어있지 않기 때문. -> 병렬적으로 처리하자(2s)

async function pick3() {
    const applePromise = getApple(); // Promise 만드는순간  블럭 내 코드 바로 실행
    const bananaPromise = getBanana();
    const apple = await applePromise;
    const banana = await bananaPromise;
    return `${apple}, ${banana}`
}

function pickAll() {
    // all : Promise에 배열 전달하면 모든 promise들이 병렬적으로 다 받을때까지 모아줌 
    return Promise.all([getApple(), getBanana()])
    .then(fruits => fruits.join(' + '));
}