자바스크립트의 async과 await

async란

전 내용에서 설명한 비동기(Asynchronous)가 async이다. 

async와 await는 비동기 처리 패턴 중에 하나이다. 프로미스가 콜백 지옥을 해결했다지만 여전히 코드가 길어서 읽기 좋은 코드라고 할 수는 없다. async / await 문법은 기존의 방식의 단점들을 보완하고 코드를 한 번 더 깔끔하게 줄일 수 있다.

async가 붙은 함수는 반드시 promise를 반환하고, promise가 아닌 것은 promise로 감싸 반환한다. 

 

await란

await는 async 함수 안에서만 동작한다. await는 프라미스가 처리될 때까지 기다리는 역할을 한다. 그리고 프라미스가 처리되면 그 결과와 함께 실행이 재개된다.

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

        async function startAsync(age) {
            if (age > 20) return `${age} success`;
            else throw new Error(`${age} is not over 20`);
        }

        async function startAsyncJobs() {
            await setTimeoutPromise(1000);
            const promise1 = startAsync(25);
            try {
                const value = await promise1;
                console.log(value);
            } catch (e) {
                console.error(e);
            }
            const promise2 = startAsync(15);
            try {
                const value = await promise2;
                console.log(value);
            } catch (e) {
                console.error(e);
            }
        }

        startAsyncJobs();

이런 구문을 작성했다고 하자 startAsyncJobs()를 실행해 주면 해당 함수는 비동기 이기 때문에 setTimePromise(1000)을 기다리지 않고 다른 것들이 먼저 작동해야 하지만 await가 붙어있기 때문에 1초를 기다렸다가 실행이 된다. await를 지워주면 바로 작동이 된다. async는 비동기여서 원래 기다리지 않고 다른 함수가 먼저 실행돼야 하는 게 맞지만 await를 써주면서 비동기 안에서 동기처리를 하는 것이다.(무질서 속의 질서..?) 

그리고 난 후에는 promise1은 25기 때문에 try문을 출력해주고, promise2은 15이기 떄문에 catch문을 출력해 준다.