비동기 호출, async, await를 이해해 보자.

2020/04/12 - [JavaScript] - 비동기 호출, Promise를 이해해 보자.

2020/04/14 - [JavaScript] - 비동기 호출, Promise를 이해해 보자(2).

 

이전 글에서 자바스크립트 비동기 호출을 위한 Promise에 대해서 알아보았는데요.

 

이 Promise 보다 훨씬 사용하기 편하고, 코드 가독성도 뛰어난 async function, awiat에 대해서 알아보겠습니다.

 

async function

async function

await

await

 

async는 함수 자체를 비동기로 선언할 수 있어서, async로 선언된 함수 내에서 Promise를 사용할 때 동기화 함수를 사용하는 것처럼 코드를 작성할 수 있도록 해줍니다.

 

간단한 예제를 통해서 비교해 보겠습니다.

 

먼저, Promise를 사용하는 간단한 예제 입니다.

 

const testPromise = value => {
  return new Promise((resolve, reject) => {
    setTimeout(()=>{
      if(value > 1000) {
      	resolve("Good!");
      } else {
        reject("value is too small.");
      }
    }, 1000);	
  });
};

console.log("start");

testPromise(1000)
  .then(res => console.log(res))
  .catch(err => console.log(err));
  
console.log("end");

 

 

 

코드를 실행하면 아래와 같이 콘솔 메시지가 모두 출력된 후 then, catch를 사용해서 비동기 함수를 실행한 결과가 출력됩니다.

 

Promise 예제

 

위 코드를 async 함수를 사용하는 예제로 바꿔 보겠습니다.

 

const testPromise = value => {
  return new Promise((resolve, reject) => {
    setTimeout(()=>{
      if(value > 1000) {
      	resolve("Good!");
      } else {
        reject("value is too small.");
      }
    }, 1000);	
  });
};

const testAsyncFn = async value => {
  console.log("start");

  try {
    let res = await testPromise(value);  
    console.log(res);
  }catch(err){
    console.log(err);
  }
  
  console.log("end");
}

testAsyncFn(100);
testAsyncFn(10001);

 

코드를 실행하면 아래와 같이 start 메시지가 출력되고 testPromise 비동기 함수 실행 결과가 출력된 후 end 메시지가 출력됩니다.

 

async 함수 예제

 

then, catch 대신에 try, catch를 사용해서 좀 더 가독성이 높게 코드를 작성할 수 있습니다.

 

저는, Promise를 사용하는 async 함수를 추가로 정의해야하는 수고로움이 있지만, 두 번째 방법이 좀 더 친숙하고 프로그램 코드 가독성도 높아서 마음에 드는군요.