[ES6] Async와 Promise의 차이점

Async와 Promise는 비동기 통신 함수이다. Promise가 Async보다 먼저 나왔고 Async는 비교적 최근에 들어서 생긴편에 속한다. 기존의 Promise는 콜백의 불편함을 해소하기 위해 만들어졌다고 한다. 그렇다면 Promise가 있음에도 어째서 새로운 문법인 Async가 추가된것일까? 이번글에서는 그 이유에 대해서 알아보고자 한다.

Async / Await 이란?

callback이나 promise와 같은 비동기 통신을 구현하는 새로운 방법으로 동기적으로 코딩할 수 있도록 도와주는 역할을 한다. 이전 글에서도 말했다시피 비동기의 특징중 하나로 논블로킹(Non-Blocking)이 있는데 이는 실행중인 비동기 함수가 다른 함수의 실행을 지연시키지 않는다는 의미이다. 그렇다면 Async는 비동기 함수임에도 불구하고 동기적으로 코딩할 수 있다는 의미일까?

 

결론부터 말하자면 그렇다. 먼저 아래 코드를 보도록 하겠다.

// Async/Await
async asyncFunc() {
  try 
  {
    const res = await axios.get('/api/read/content')
    console.log(res)
    return res
  } 
  catch (err) 
  {
    console.log(err)
  }
}

// Promise
async promiseFunc() {
  getContent().then(res => {
    // TODO: logic
    console.log(res)
    return res
  }).catch(err => {
    consnole.log(err)
  });
}

 

첫번째는 Async, 두번째는 Promise로 구현한 코드이다. 보다시피 두 코드의 가장 큰 다른점은 promise의 경우 요청이 성공했을때의 코드를 .then() 함수 내에서만 작성할 수 있다는것이다. async의 경우 asyncFunc()의 내부라면 위치에 상관없이 res의 promise객체에 관여할 수 있다.

 

또한 async함수 내에서 비동기 요청을 하기위해 axios함수 앞에 await를 붙히게 되는데, 이로인해 해당 요청의 실행순서를 최상위로 올리게 게된다. 그로인해 비동기 요청의 결과(데이터)값을 필요로 하는 코드들이 데이터가 없어 곤란한 상황에 빠지지 않게된다. 이러한 특성이 비동기 함수를 동기적 흐름으로 사용할 수 있는 이유이다. 이외에도 Async함수가 Promsie함수보다 편리한 이유는 여러가지가 있다.

 

• 코드가 간결해지고 가독성이 높아진다
• try/catch로 에러를 핸들링할 수 있다
• 에러가 어디서 발생했는지 알기 쉽다.