13. 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs

// async & await

// promise의 깔끔한 타입!!



//1. async

async function fetchUser(){ //함수앞에 'async'를 써주면 함수의 return으로 new Promise를 쓰지 않아도 자동으로 입력한것처럼 처리해준다

    //네트워크통신을해서 10초정도 걸리는중....

    return 'ellie'

     

}



const user = fetchUser();

user.then(console.log);

console.log(user); //비동기처리를 하지않으면 JS는 동기적으로 처리한다.(로딩이 길다면 사용자는 오래 기다려야한다.)

//2. await



function delay(ms){

    return new Promise (resolve =>setTimeout(resolve,ms));

}



async function getApple(){

    await delay(2000);

    return '사과';

}



async function getBanana(){

    await delay(2000);

    return '바나나';

}



async function pickFruits(){

    const applePromise =  getApple();

    const bananaPromise =  getBanana(); //선언하자마자 promise시작됨

    const apple = await applePromise;

    const banana = await bananaPromise;

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

}



pickFruits().then(console.log);




//3. useful Promise APIs

// -1. Promise.all 배열안에있는 애들을 비동기적으로 await해주고 완료해줌

function pickAllFruits(){ 

    return Promise.all([getApple(), getBanana()]).then(fruits =>fruits.join('+'));

}

pickAllFruits().then(console.log);



// -2 Promise.race //배열안에서 가장 먼저 return을 보내주는 애만 가져옴

function pickOnlyOne(){

    return Promise.race([getApple(),getBanana()]);

}



pickOnlyOne().then(console.log);