[Javascript] Promise 사용시 async, await 사용하는 방법

지난 포스팅에서는 프로미스(Promise)에 대해서 알아보고 Promise 함수를 만드는 방법에 대해서 소스코드로 알아보았습니다. 비동기 함수를 사용하데 있어서 어려움이 있습니다. 이 어려움을 프로미스가 조금 더 편리하게 비동기 함수를 사용할 수 있도록 만들어 주었습니다.

이번 포스팅에서는 비동기를 동기처럼 사용해 볼 수 있는 async와 await에 대해서 알아보겠습니다.

---

async와 await

async와 await 키워드를 사용하면 프로미스를 조금 더 편하게 사용할 수 있습니다. 그럼 각각은 어떤 역할을 하고 있는지 보시죠.

 

async

async는 함수 앞에 붙는 키워드입니다. 이 키워드를 사용하면 사용한 함수는 항상 프로미스(Promise)를 반환합니다. 아래 예제를 보겠습니다.

const asyncFunc = async () => {
    return 'asyncFunc';
}

asyncFunc().then(res => console.log(res));

함수에 async를 붙여주면 프로미스가 아니더라도 프로미스를 반환합니다. 따라서 .then()을 이용해서 결과를 받을 수 있습니다.

 

await

await 역시 함수 앞에 붙는 키워드입니다. 이 키워드는 프로미스를 반환하는 함수 앞에 붙여서 사용할 수 있습니다. 이 경우에는 결과를 동기처럼 받을 수 있습니다. 예제를 보시죠.

const asyncFunc = async () => {
    let promiseFunc = new Promise((resolve, reject) => {
        resolve('promiseFunc');
    });

    const ret = await promiseFunc;
    return ret;
};

asyncFunc().then(res => console.log(res));

await 키워드를 사용하면 promiseFunc을 실행한 결과가 반환될때까지 대기했다가 결과가 반환되면 그 결과를 바로 가져올 수 있습니다. 프로미스(Promise)의 경우는 .then(), .catch()를 이용해서 받아야 했지만 await를 사용하면 바로 받을 수 있어서 가독성이 좋아집니다.

 

await를 사용할때 한 가지 주의할 부분은 async 함수 내부에서 사용해야 한다는 것입니다. 그렇지 않으면 문법 에러가 발생합니다.

---

async와 await 다시 보기

async와 await를 사용한 예제를 다시 한번 알아보겠습니다. 아래는 두 개의 프로미스(Promise) 함수가 있습니다.  

const request1 = () => {
    return new Promise((resolve, reject) => {
        resolve('request1 success');
    });
}

const request2 = () => {
    return new Promise((resolve, reject) => {
        resolve('request2 success');
    });
}

request1()
    .then(res => {
        console.log(res);
        return request2();
    })
    .then(res => {
        console.log(res);
    });

request1() 함수를 먼저 실행하고 결과를 받으면 request2() 함수를 실행하도록 하기 위해서는 reqeust1() 함수를 실행한 이후에 .then()으로 결과를 받고, 다시 request2() 함수를 실행해야 합니다.

 

이런 방법으로 여러개의 프로미스를 .then()으로 연결할 수 있습니다. 이 경우에는 비동기 함수를 부를수록 가독성이 떨어지게 됩니다. 그래서 async와 await를 이용해서 변경해 보도록 하겠습니다.

 

const request1 = () => {
    return new Promise((resolve, reject) => {
        resolve('request1 success');
    });
}

const request2 = () => {
    return new Promise((resolve, reject) => {
        resolve('request2 success');
    });
}

const working = async () => {
    const res1 = await request1();
    console.log(res1);
    const res2 = await request2();
    console.log(res2);
    return 'success';
}

working().then(res => console.log(res));

 

먼저 이 함수들을 실행할 async 함수를 만들어 줍니다. 그리고 내부에서는 두 프로미스 함수인 request1()과 request2()를 호출할 때 await를 사용합니다. 이렇게 사용하면 각각 결과가 return 되고 이 결과를 받아서 처리할 수 있습니다.

 

마지막으로 working() 함수는 async 함수이기 때문에 .then()으로 결과를 받을 수 있습니다.

---

이번 포스팅에서는 프로미스를 조금 더 편리하게 사용하는 방법인 async와 await에 대해서 알아보았습니다. 이 둘을 이용하는 방법은 프로그램의 가독성을 높이는데 매우 효과적일 수 있습니다. 도움이 되셨으면 합니다. 이상입니다.