Promise와 async/await

동기 처리와 비동기 처리

• 동기처리
  요청하면 시간과 상관없이 요청한 자리에서 결과가 나와야 함
  
  
• 비동기처리
  요청한 결과는 동시에 일어나지 않음

❓비동기 처리가 필요한 이유❓
js는 동기적이지만, 서버에 데이터를 요청하는 등 대기시간이 긴 작업이 있을 땐 비동기 작업을 해야 함

function printAnimals() {
  const animals = getAnimals();
  console.log(animals); //undefined
}
printAnimals()
// 대기시간이 긴 경우 animals의 값은 undefined가 출력됨

Promise

• 내용은 실행되었지만 결과를 아직 반환하지 않은 객체

1. Pending(대기) - 비동기 처리가 완료되지 않았을 시
2. Fulfilled(이행) - 완료되었을 시
3. 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);
  });

async/await

• callback이나 Promise의 경우 꼬리에 꼬리를 무는 코드가 나올 수 있음 - 콜백 지옥, then() 지옥
• await를 통해 Promise 반환 값을 받아 올 수 있음
• async / await는 Promise와 다르게 에러 핸들링 기능이 별도로 없어 try-catch()문을 활용해 에러를 핸들링 해야 함
• 응답값을 명시적인 변수에 담아 사용 - 직관적으로 변수를 인식
• async / await 는 then을 사용하지 말고 변수에 담아서 사용할 것!

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 vs async/await

• async는 간결하나, Promise는 then 지옥에 빠질 수 있음
• async / await은 에러 위치를 찾기가 쉽다.
• 에러 핸들링
  Promise 활용시 .catch()문을 통해 에러 핸들링이 가능하고, async / await은 try-catch()를 활용함
• 코드 가독성
  1. Promise - .then()지옥의 가능성
  2. 코드가 길어질수록, async / await를 활용한 코드가 가독성이 좋음
  3. async / await은 비동기 코드를 동기 코드처럼 보여줌