출처 : 유튜브 드림코딩 자바스크립트

async & await

clear style of using promise
기존에 존재하는 promise 위에 조금 더 간편한 API를 제공한다.
= syntactic sugar (ex. class)
promise를 좀더 간결하게 만들어주며, 동기적으로 실행되는 것처럼 보이게 만들어준다.

1. async

async 를 함수 앞에 붙여줌으로서 함수가 자동적으로 promise로 변환된다.
간편하게 promise 이용 => syntactic sugar

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


const user = fetchUser(); //Promise {<fulfilled>: 'ellie'} 출력 
user.then(console.log)
console.log(user);

2. await ✨

async 가 붙은 함수 안에서만 쓸 수 있음.
await : delay가 끝날 때까지 기다려준다.

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

위 함수는 정해진 ms가 지나면 정해진 resolve를 호출하는 promise를 return한다.

async function getApple(){
    await delay(1000);
    //throw 'error'; //error handling
    return '🍎';
}
async function getBanana(){
    await delay(2000);
    return '🍌';
}

위 함수는 비동기적이지만 동기적인 것처럼 보인다.

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

get Banana() promise 형태

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

위 함수를 async과 await을 이용하여 간단하게 만들기

{
    async function pickFruits(){
    try{
 
    const apple = await applePromise();
    const banana = await bananaPromise();
    
} catch{
    return '🍍' // handling error 
}
return `${apple} + ${banana}`;}

pickFruits().then(console.log);
}

3. await 병렬처리 해주기

get Apple 과 getBanana 동시에 처리해서 시간 단축하기
promise를 만들어서 바로 promise 안 코드 블럭들 실행되게끔 해주기

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

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

pickFruits().then(console.log);

4. useful Promise APIs

Promise.all : promise에 배열을 전달하게 되면 모든 promise들이 다 받을 때까지 모아주는 아이

function pickAllFruits(){
    return Promise.all([getApple(),getBanana()])
    .then(fruits => fruits.join(' + '));
}
pickAllFruits().then(console.log);


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

pickOnlyone().then(console.log); //🍎 출력된다.