JS Promise, async/await

자바스크립트에서는 비동기 처리를 다룰 수 있는 방법에는주로 callback, Promise, async/await 를 활용한다.

Promise

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

Promise의 3가지 상태

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

<script>
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);
  });
</script>

promise는 내용은 실행되었지만 결과를 반환하지 않은 객체이다.

promise의 생성 방법은 new 연산자를 이용하여 생성한다.

promise객체의 성공은 resolve를 호출하여 then()을 통해 결과 값을 반환 받을 수 있고, 실패 reject의 반환 값에 대해서는 catch()를 통해 받는다.

async/ await

callback 이나 Promise 의 경우에 단점은 꼬리에 꼬리를 무는 코드가 나올 수도 있다는 부분이다.
async와 await은 비동기 처리 문법으로 기존의 callback 이나 Promise 의 단점을 해소하고자 만들어졌다.

async와 await의 사용예시

<script>
(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);
  }
})();
</script>

함수앞에 async 키워드를 붙이고 그 안에 await을 사용할 수 있다. await은 비동기 코드가 동기처럼 읽히게 해준다. await이 붙은 코드줄은 그 줄이 수행된 후에 다음으로 넘어간다.

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