[Javascript] await / async 에 대해..(비동기 처리)

2021. 7. 14. 22:37front-end/JavaScript

//async & await
//clear style of using promise 

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

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

//2. await ✨
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

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

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

//프로미스도 중첩되면 콜백지옥을 연상케 됨.
//병렬적 await > 동시다발적 실행
async function pickFruits(){
    const applePromise = getApple(); //Promise 안에 있는 코드블럭 실행 각각 시키고 
    const bananaPromise = getBanana();
    const apple = await applePromise; //await > 동기화 시켜줌..
    const banana = await bananaPromise;
    return `${apple} + ${banana}`;
}

pickFruits().then(console.log);

//3. useful APIs ✨
function pickAllFruits(){//Promise 에 있는 all APIs
    return Promise.all([getApple(), getBanana()]).then(fruits =>
        fruits.join(' + ')//배열을 스트링으로 묶을 수 있는 join
      );
}

pickAllFruits().then(console.log);

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

pickOnlyone().then(console.log);