[JavaScript] async와 await - Promise syntactic sugar

비동기 처리를 도와주는 async와 await에 대해 알아보자.

 

기존의 비동기 처리 방식인 콜백 함수와  프로미스(Promise)의 단점을 보완하고 개발자가 일기 좋은 코드를 작성할 수 있게 도와주는 문법인데, 제목에서 말한것처럼 Promise의 syntactic sugar라고 보면 된다.

 

기존에 없던게 아니고 그냥 좀더 Promise를 사용하기 쉽게 도와주는 문법이라 생각하면 될 것 같다.

(object와 class의 관계랄까...?)

 

코드를 통해 하나씩 알아가보자.

---

1. async 사용법

// 1.함수로 만들어진 기본 promise 문법 (async x)
function blog() {
    return new Promise((resolve, reject) => {
        resolve('mine-it-record');
    });
}

const bloger = blog();
bloger.then(result => console.log(result));

// 2. async를 사용하여 위 코드를 변경하기 (async o)
async function blog() {
    return 'mine-it-record';
}

const bloger = blog();
bloger.then(result => console.log(result));

 

위 예제를 보면 알겠지만 일반 Promise 문법을 사용했을때와 마찬가지로 아래 async로 이루어진 메서드 역시 동일한 방식으로 then을 통해 제어하는 것을 볼 수 있는데,

이는 본문 시작부분에서 얘기했던것처럼 async는 Promise의 syntactic sugar 이기 때문에 Promise 문법을 좀 더 사용하기 쉽게 도와주는 역할을 해주기 때문이다.

 

그래서 위 예제를 직접 실행해보면 2번 예제 역시 Promise를 반환해 주는것을 볼 수 있다.

 

2. await 사용법

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

async function getMine(){
    await delay(1000);
    return 'mine';
}

async function getIt(){
    await delay(1000);
    return 'it';
}

async function createBlogName(){
    const mine = await getMine();
    const it = await getIt();

    return `${mine}-${it}-record`;
}

createBlogName().then(result => {
    console.log(result);
});

await는 async와 꼭 같이 사용해야한다. (async 설정이 안되어있는 일반 함수에서는 사용이 불가능하다.)

 

await는 말 그대로 "기다려" 라는 의미인데,

await가 사용된 비동기 통신이 완료될때까지 기다린 다음에야 다음으로 넘어간다.

 

위 예제로 설명을 해보자면 각각 delay나 getMine, getIt에 await가 사용되었는데,

그 메서드들이 완전히 실행이 완료되어야 다음 줄이 실행된다는 의미이다.

 

await를 쓰는 가장 큰 이유는 콜백지옥 때문인데, then 역시도 남발하면 콜백지옥과 별다를게 없기 때문에 await를 사용해주면 가독성이 더 좋은 코드가 완성된다.

 

3. async & await 예외 처리

...

async function createBlogName(){
    try {
        const mine = await getMine();
        const it = await getIt();
    } catch (error) {
        console.log(erro);
    }

    return `${mine}-${it}-record`;
}

...

이런식으로 가볍게 try catch문을 사용해서 잡아주면 된다.

---

참고 : https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Async_await

async와 await를 사용하여 비동기 프로그래밍을 쉽게 만들기 - Web 개발 학습하기 | MDN