자바스크립트 Promise async await 설명 및 예제

😎자바스크립트 Promise async await 설명 및 예제

 

✅ JavaScript Promise 란?

JavaScript Promise는 비동기 처리에 사용되는 객체이다.

어떤 작업이 완료되기를 기다리고 그 작업이 완료되면 결과를 반환한다.

즉, Promise는 비동기 함수의 결과를 처리하는데 사용된다.

 

Promise는 다음과 같은 특징이 있다.

• 비동기 처리 결과를 나타내는 객체
• Promise의 상태는 대기(Pending), 이행(Fulfilled), 거부(Rejected) 세 가지 상태 중 하나를 갖는다.
• Promise는 단 한 번만 상태를 변경할 수 있다.

Promise는 대기(Pending) 상태에서 시작해 이행(Fulfilled) 또는 거부(Rejected) 상태 중 하나로 변경된다.

이행 상태는 Promise가 성공적으로 완료되었음을 나타내며, 거부 상태는 Promise의 실패를 나타내고

실행 결과로 인해 Promise의 상태가 변경되면, Promise 객체는 그 상태를 유지한다.

즉, 이행 또는 거부 상태에 도달하면 해당 상태를 유지하며, 이렇게 반환된 상태는 더 이상 변경할 수 없다.

Promise를 사용하면 비동기 코드를 동기식으로 작성할 수 있기 때문에

코드의 가독성과 유지보수성이 향상되고, 비동기 처리의 오류를 효율적으로 처리할 수 있다.

 

promise 사용 예시

const status = true
const promise = new Promise((resolve, reject) => {
  if (status) {
    resolve('성공')
  } else {
    reject('실패')
  }
});

promise
  .then((res) => { //성공 실행코드
    console.log(res);
  })
  .catch((error) => { //실패 실행코드
    console.log(error);
  });

조건(status 값)이 참이면 resolve(성공) 를 호출하고, 아니면 reject(실패) 를 호출한다.

resolve 반환 값은 then()을 통해 결과 값을 반환 받을 수 있고

reject의 반환 값은 catch() 를 통해 반환 받을 수 있다.

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

 

✅ async / await 란?

callback 함수나 Promise의 단점은 꼬리에 꼬리를 무는 코드가 나올 수 있고

콜백 지옥, then()지옥이라고 부른다.

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

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

 

async/await 사용 예시

(async () => {
  const status = true;
  const promise = new Promise((resolve, reject) => {
    if (status) {
      resolve('성공');
    } else {
      reject('실패');
    }
  });

  try {
    const result = await promise //await 를 통해 Promise 반환 값을 받아 올 수 있다.
    console.log(result)
  } catch (error) {
    console.log(error)
  }
})();

또는

async function callAsync() {
  try{
    const data = await fetch('api') //1. fetch 실행 후
    if(data !== undefined) { //2. 이 코드가 실행된다
      console.log(data);
    }
  } catch (error) { //에러 핸들링
    console.log(error)
  }
}
callAsync()

 

즉, await는 어떠한 코드의 실행이 완료되기까지를 기다릴 수 있게 해준다.

비동기 코드를 동기 코드처럼 작성할 수 있다는 의미이다.

주의할 점은 async/await은 Promise와는 다르게 에러를 핸들링 할 수 있는 기능이 없기 때문에

try/catch문을 활용해서 에러 핸들링을 해야한다.

 

 

✅ Promise async/await 차이점

• 가독성
  • Promise는 .then() 지옥의 가능성이 있다.
  • 코드가 길어질수록, async/await를 활용한 코드가 가독성이 좋다.
  • async/await은 비동기 코드를 동기 코드처럼 작성할 수 있고, 코드 흐름을 이해하기 쉽다.
• 에러 핸들링
  • Promise를 사용할 때는 .catch() 문을 통해 에러 핸들링이 가능하다.
  • async/await은 에러 핸들링 기능이 없어서 try-catch() 문을 활용해야 한다.

 

 

 

참고

Promise : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

async/await : https://ko.javascript.info/async-await