[Javascript] async/await

async와 await는 ES2017(ES8)에서 추가된 문법입니다. 주로 비동기 프로그래밍에서 자주 사용하며,  이전 포스트에서 다룬 프로미스 객체를 좀 더 간결하게 바꿔줍니다.

 

async와 await 문법은 지난번에 배운 프로미스 객체의 비동기 처리와 이어집니다. 

2021.05.24 - [Programming/Javascript] - [Javascript] 프로미스(promise) 객체

[Javascript] 프로미스(promise) 객체

---

1. async와 await의 기본 문법

우선 사용법 부터 들여다 보면, async는 함수 선언에서 선언 제일 앞부분에 async 키워드만 붙이면 됩니다. await는 프로미스 객체의 앞에 붙여주기만 하면 됩니다.

async function 함수명(){
}

await 프로미스;

 

 

 

 

2. async와 await의 사용

기본 형태를 알아봤으니 이제는 사용법을 보며 이해해 볼 차례입니다. 비동기 처리의 대표적인 함수인 setTimeout()을 가지고 예제를 만들어보았습니다.

 

※ 왜 setTimeout()은 비동기 처리인가?

setTimeout()은 전달된 인수 만큼의 시간 후에 지정된 함수(혹은 명령)을 실행합니다. 즉 setTimeout()이 해석된 순간에 카운트를 시작하고 일정 시간후에 명령을 수행하기 전까지 스크립트는 계속 읽어나가게 됩니다. 이러한 원리로 인해 읽기는 먼저 읽고, 실행은 특정 순간에 되는 setTimeout()을 비동기 처리라고 할 수 있습니다.

 

우선 프로미스 객체만을 이용한 예제입니다.

function func() {
    console.log('func() 실행 중');

    return new Promise((resolve => {
        setTimeout(resolve('promise'), 1000);
    }));
}

func().then((message)=> {
    console.log(message);
})
.catch((errorMessgae)=>{
    console.log(errorMessgae);
});

func()는 setTimeout()을 이용해서 코드가 해석되고 1초후에 resolve를 호출합니다. 이때 'promise'라는 문자열을 전달합니다. 이 예제를 async로 간단히 바꿔보겠습니다.

async function func() {
    console.log('func() 실행 중');

    return 'promise with async';
}

func().then((message)=> {
    console.log(message);
})
.catch((errorMessgae)=>{
    console.log(errorMessgae);
});

func() 함수를 async 문법으로 바꿨습니다. return 부분이 간결해졌죠. 이렇게 async 키워드를 붙여주면 반환값이 항상 프로미스 객체를 반환하게 됩니다. async 키워드가 없다면 문자열을 반환한것으로 처리되었겠지만, async를 붙임으로써 프로미스 객체를 반환했습니다.

이때 프로미스를 반환하며 자동적으로 resolve된 프로미스를 반환시킵니다. 즉, new Promise()~~~와 같은 과정 이 없어도 알아서 Promise 구문으로 감싸고, resolve를 반환시켜주는 것입니다.

---

이번엔 async와 짝을 이루는 await를 보겠습니다. await는 async내부에서만 사용이 가능한 키워드입니다. await는 지정한 프로미스가 resolve 될 때까지 기다리는 기능을 합니다. setTimeout()을 가지고 await을 살펴보겠습니다.

console.log('func() 시작');
func();
console.log('func() 종료');

async function func() {
    console.log('func() 실행 중');

    const promise = new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve('await', 1000);
        });
    });
    
    console.log(await promise);
}

예제를 보면 시작과 종료 사이에 func()를 호출 했습니다. 그래서 func()실행 중이라는 문자열은 정상적으로 사이에 실행되었으나 await 문자열은 1초 후에 출력되었음을 볼 수 있습니다.

 

여기서 눈여겨 볼 점은 then()과 catch()를 기술하며 늘어졌던 코드가 함수 하나에 정리되었음을 알 수 있습니다. 실제 코드부분만 빼서보면 다음과 같으니 어마무시하게 간결해졌음을 알 수 있습니다.

async function func() {
    const promise = new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve('await', 1000);
        });
    });

    console.log(await promise);
}

 

위 예제에서는 reject된 경우, 즉 catch부분이 없습니다. 그래서 async와 await구문에서는 try~catch구문으로 에러 상황을 잡아냅니다.

async function func() {
    try{
        const promise = new Promise((resolve, reject) => {
            setTimeout(()=>{
                resolve('await', 1000);
            });
        });

        console.log(await promise);
    }
    catch (e) {
        console.log(e);
    }
}

---

참조

https://learnjs.vlpt.us/async/02-async-await.html

02. async/await · GitBook

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function

async function - JavaScript | MDN