[JS] Promise와 async/await의 차이

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

주로 callback, 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;

※ 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://velog.io/@pilyeooong/Promise%EC%99%80-asyncawait-%EC%B0%A8%EC%9D%B4%EC%A0%90

Promise와 async/await 차이점

https://www.youtube.com/watch?v=aoQSOZfz3vQ