13강. async, await, promise APIs

syntactic sugar

 

 async & await  _ clear style of using promise :)

1. async

function fetchUser(){
    //if) do network request in 10secs..
    return 'ellie';
}
const user = fetchUser();
console.log(user);


//promise
function fetchUser(){
    return new Promise((resolve, reject)=>{
        //do network request in 10secs..
        resolve('ellie');
    });
}
const user = fetchUser();
user.then(console.log);
console.log(user);


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

 

2. await ✨ _ async 함수내에서만 사용가능

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

async function getApple(){
    await delay(3000); //3초 대기
    throw 'error';
    return '🍎';
}

// function getBanana(){
//     return delay(3000)
//     .then(()=> '🍌');
// }


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

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

async function pickFruits(){

    //try{
        const apple = await getApple();
        const banana = await getBanana();
    //}catch(){} //error

    return `${apple}+${banana}`;
}

pickFruits().then(console.log); //3초+3초 후 '🍎+🍌'

 

병렬실행(시간단축)

async function pickFruits(){
    const applePromise = getApple();
    const bananaPromise = getBanana();
    const apple = await applePromise();
    const banana = await bananaPromise();

    return `${apple}+${banana}`;
}

 

3. useful Promise APIs

function pickAllFruits(){
    return Promise.all([getApple(), getBanana()]) //모든 promise병렬 실행
    .then(fruits =>fruits.join('+')
    );
}

pickAllFruits().then(console.log);

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