1. then-catch를 이용한 비동기 함수 처리

앞전에 배운 비동기 함수를 Promise 객체로 선언한 코드가 있다고 쳐보겠습니다.

function myProm(){
  return new Promise(resolve => {
    resolve('완료');
  })
}

이때 반환 받은 Promise의 상태가 정상 상태(resolve)일 경우에 대한 코드로는 다음과 같이 then-catch를 이용해 작성할 수 있는데요.

myProm().then(result => console.log(result))

JS에서는 이러한 비동기 함수인 Promise의 결과값에 대한 처리를 then,catch문으로 작성하는데요. 이러한 방법 보다도 좀 더 직관적으로 코드를 작성할 수 있게 처리를 해주는 비동기 키워드도 존재합니다. 바로 async와 await 키워드죠.

2. async와 await을 활용한 비동기 함수 실행

async와 await은 비동기적인 코드의 흐름을 동기적인 방식으로 흐를 수 있도록 해주는 키워드로, 한마디로 비동기 API나 메서드를 동기적인 흐름을 갖도록 만드는 키워드입니다. 특히 API를 가져올 때 정보의 일관성을 유지하기 위해 사용되죠.

이때 함수의 앞쪽에는 async 키워드를, 비동기 함수의 결과값을 반환 받는 쪽(비동기 함수를 호출한 쪽)에서는 해당 함수의 반환값을 받는 역할을 하는 await 키워드를 아래의 코드와 같이 작성하게 됩니다.

async function print(){
  try{
  const result = await myProm();
  console.log(result);
  }catch(err){
  	console.log(err)
  }
}
print();

위와 같이 코드를 작성할 경우 myProm 비동기 함수의 결과값을 result에서 받게 되어 처리를 할 수 있는데요. 즉 then,catch를 사용할 때보다 코드를 좀 더 직관적으로 사용할 수 있습니다.

하지만 단점 또한 존재하는데요. async나 await을 사용할 때에는 함수 안에서 정의를 해주어야 된다는 점, catch문 처리를 위해 try-catch문으로 감싸서 처리를 해주어야 된다는 점이 존재합니다.

then-catch와 async-await 간의 동기 작업 비교

다음 코드는 then-catch와 async-await을 이용해 첫번째 작업부터 세 번째 작업까지의 비동기 작업을 동기화 하는 코드인데요.

확실히 async와 await 키워드를 이용한 코드가 좀 더 코드를 이해하는데 쉬운, 직관적인 코드임을 확인할 수 있습니다.

1. then-catch

function myProm2() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('실행 2번');
        }, 5000);
    });
}

function run() {
    // 첫 번째 비동기 작업
    new Promise(resolve => {
        setTimeout(() => {
            resolve('실행 1번');
        }, 500);
    })
    .then(result1 => {
        console.log(result1); // '실행 1번' 출력

        // 두 번째 비동기 작업
        return myProm2();
    })
    .then(result2 => {
        console.log(result2); // '실행 2번' 출력
        console.log('실행 3번'); // 마지막으로 실행됨
    })
    .catch(error => {
        console.error('에러 발생:', error);
    });
}

run();

2. async-await

function myProm2() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('실행 2번');
        }, 5000);
    });
}

async function run() {
    try {
        // 첫 번째 비동기 작업
        const result1 = await new Promise(resolve => {
            setTimeout(() => {
                resolve('실행 1번');
            }, 500);
        });
      
        console.log(result1); // '실행 1번' 출력

        // 두 번째 비동기 작업
        const result2 = await myProm2();
        console.log(result2); // '실행 2번' 출력

        console.log('실행 3번'); // 마지막으로 실행됨
    } catch (error) {
        console.error('에러 발생:', error);
    }
}

run();