async & await

async와 await은 Promise를 조금 더 간결하게 그리고 동기적으로 실행되는 것처럼 보이도록 만들어준다. Promise chainig과 같이 난잡해진 코드 위에 사용하면, 동기식으로(순서대로) 코드를 작성하는 것처럼 간편하게 만들 수 있다.

이렇게 기존에 존재하는 것 위에 간편하게 쓸 수 있는 API를 제공하는 것을 📌 syntactic sugar 라고 한다.

async

promise로 만든 것을 async로 간편하게 작성해 보자.

<script>
	// Promise로 만든 것
    function fetchUser(){
        return new Promise((resolve, reject) => {
            resolve('yura');
        })
    }

    // async를 사용하여 간단하게 표현 
    async function fetchUser(){
        return 'yura';
    }

    const user = fetchUser();
    user.then(console.log);
    console.log(user);
</script>

await

<script>
    function delay(ms){
        // 정해진 시간 ms가 지나면 resolve를 호출하는 Promise를 리턴
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    async function getApple(){
        // await은 이 delay가 끝날때까지 3초 기다려준다.  
        await delay(3000);
        return '🍎';
    }

    async function getBanana(){
        await delay(3000);
        return '🍌';
    }
    
          // -> getBanana()를 Promise chaining으로 표현한다면?
          function getBanana(){
              return delay(3000)
              .then(()=> '🍌');
          }
    
    
    function pickFruits(){
        return getApple().then(apple => {
            return getBanana().then(banana => `${apple} + ${banana}`);
        });
	}

    // -> 위의 식을 async로  
    async function pickFruits(){
        const apple = await getApple();
        const banana = await getBanana();
        return `${apple} + ${banana}`;
    }

    pickFruits().then(console.log); // 6초뒤 🍎 + 🍌 출력 
</script>

---

Promise APIs

all

• Promise 배열을 전달하여 병렬적으로 다 받을 때까지 모아준다.
• getApple와 getBanana는 서로 연관이 없기 때문에 각 3초라는 시간 즉, 총 6초를 기다려야 할 필요가 없다. 이 때, all을 이용하여 병렬로 실행하면 3초만 기다리면 된다.

<script>
    function pickAllFruits(){
        return Promise.all([getApple(),getBanana()])
        .then(fruits => fruits.join(' + '));
    }
    pickAllFruits().then(console.log); // 3초뒤 🍎 + 🍌 출력
</script>

race

• 어떤 것이든 상관없이 먼저 리턴되는 첫번째 값만 받아오고 싶을 때

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

🌱 Dream Coding 의 내용을 정리하였습니다 :)