Async, Await와 Promise의 차이는?

Async, Await와 Promise의 차이는?

Promise를 더욱 쉽게 사용할 수 있도록 ES2017(ES8) 문법입니다.

함수의 앞부분에 async 키워드를 추가하고, 함수 내부에서 Promise의 앞부분에 await 키워드를 사용한다.

async, await를 사용할 경우 코드가 간결해지지만, 에러 처리를 잡기 위해 try-catch()를 사용해야합니다.

동기적인 코드 흐름으로 개발이 가능합니다.

 

자바스크립트에서는 비동기 처리를 다룰 수 있는 방법에는 여러 가지가 있다.

주로 callback, Promise, async/await를 활용한다.

그 중에서도 요즘 특히 많이 사용되는 Promise, async/await의 특징 및 간단한 사용 예시와 둘의 차이점을 정리한다.

Promise

Promise는 자바스크립트에서 비동기 처리에 사용되는 객체이다.

내용은 실행 되었지만 결과를 아직 반환하지 않는 객체라고 이해해도 좋다.

Promise에는 3가지 상태가 있는데

• Pending(대기)
• Fulfilled(이행)
• Rejected(실패)

 

비동기 처리가 완료되지 않았다면 Pending, 완료 되었다면 Fulfilled, 실패하거나 오류가 발행했다면 Rejected 상태를 갖는다.

 

Promise 사용 예시

const condition = true;
const promise = new Promise((resolve, reject) => {
if (condition) {
resolve('resolved');
} else {
reject('rejected');
}
});

promise
.then((res) => {
console.log(res);
})
.catch((error) => {
console.error(error);
});

 

condition 값의 따라 promise의 반환 값이 결정 되고 있다.

값이 참이면 resolve 를 호출하고, 아닐시에는 reject 를 호출한다.

resolve 한 반환 값에 대해서는 then() 을 통해 결과 값을 반환 받을 수 있고 reject 의 반환 값에 대해서는 catch() 를 통해 반환 받는다.

then() 과 catch() 문의 체이닝을 통해 비동기 로직의 성공 여부에 따른 분기 처리가 가능하다.

async / await

가장 최근의 나온 비동기 처리 문법으로 기존의 callback이나 Promise의 단점을 해소하고자 만들어졌다.

callback이나 Promise의 단점은 꼬리에 꼬리를 무는 코드가 나올 수도 있다는 부분이다.
흔히들 콜백 지옥, then() 지옥이라고 부른다.

await를 통해 Promise 반환 값을 받아 올 수 있다.

 

const variable = await promise;
// promise의 반환 값을 받아 variable

 

하지만 async/await를 사용하기 위해서는 선행되어야 하는 조건이 있는데, await는 async 함수 안에서만 동작한다.

 

async / await 사용 예시

 

(async () => {
const condition = true;
const promise = new Promise((resolve, reject) => {
if (condition) {
resolve('resolved');
} else {
reject('rejected');
}
});

try {
const result = await promise;
console.log(result);
} catch (err) {
console.error(err);
}
})();

 

위의 Promise 사용 코드를 async/await 를 사용하여 코드를 변경하였다.
익명 함수 패턴을 활용하였다. async 함수 내의 await 를 통해 Promise 의 반환 값을 result 변수에 담아 콘솔에 출력하는 코드이다.

 

그리고 주의할 점은 async/await 은 Promise 와는 다르게 에러를 핸들링 할 수 있는 기능이 없다. 따라서 try-catch() 문을 활용하여 에러를 핸들링 하여 주어야 한다.

차이점

• 에러 핸들링
  Promise 를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하지만, async/await 은 에러 핸들링 할 수 있는 기능이 없어 try-catch() 문을 활용해야 한다
• 코드 가독성
  Promise의 .then() 지옥의 가능성 (콜백헬, 콜백 지옥)
  **
  코드가 길어지면 길어질수록, async/await 를 활용한 **코드가 가독성이 좋다.
  async/await 은 비동기 코드가 동기 코드처럼 읽히게 해준다. 코드 흐름을 이해 하기 쉽다.

참고

https://sunnykim91.tistory.com/m/121

https://velog.io/@pilyeooong/Promise%EC%99%80-asyncawait-%EC%B0%A8%EC%9D%B4%EC%A0%90