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

** 이 글은 유튜브 강의을 보고 공부하면서 스스로 콘솔로 작성하고, 따라치면서 Javascript 기초 공부를 하는 공간입니다.

www.youtube.com/watch?v=aoQSOZfz3vQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=13

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

//1. async

function fetUser() {
    return new Promise((resolve, reject) => {
        resolve('ellie');
    });

}

const user = fetUser();
user.then((result) => console.log(result)); //ellie


// async 로 변환하면 ?
async function fetUser() {
    return 'ellie';

}

const user = fetUser();
user.then((result) => console.log(result)); //ellie

// 2. await

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

async function getApples() {
    await delay(1000);
    return 'apple';
}

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

function pickFruits() { //콜백 지옥!!!!!!!!!!!!!!!
    return getApples()
    .then(apple => {
        return getBanana()
        .then(banana => {
           console.log(apple, banana);
        });
    });
}

async function pickFruits() {
    const apple = await getApples(); //1초 뒤 
    const banana = await getBanana(); //1초 뒤 

    return apple+banana;

}

//2초나 걸림 ,,, 이걸 해결하기 위해서 
async function pickFruits() { //병렬적으로 수행! (근데 코드가 더러움 ㅠ)

    const applePromise = getApples();
    const bananaPromise = getBanana();

    const apple = await applePromise; //1초 뒤 
    const banana = await bananaPromise; //1초 뒤 

    return '${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([getApples(), getBanana()]);
}

pickOnlyOne().then(console.log);