Promise와 async/await

프로미스 (Promise)

개념

프로미스는 비동기 작업의 결과를 나타내는 객체로, 세 가지 상태를 가진다.

• Pending: 초기 상태, 작업이 아직 완료되지 않음.
• Fulfilled: 작업이 성공적으로 완료됨.
• Rejected: 작업이 실패함.

프로미스는 비동기 작업이 완료되었을 때 결과 값을 반환하거나 실패 시 에러를 반환하는 역할을 한다..

사용 방법

프로미스를 생성하고 사용하는 기본적인 방법은 다음과 같다.

// 프로미스 생성
let promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  setTimeout(() => {
    resolve("Success!"); // 작업이 성공적으로 완료되었을 때
    // reject("Error!"); // 작업이 실패했을 때
  }, 1000);
});

// 프로미스 사용
promise
  .then((result) => {
    console.log(result); // "Success!" 출력
  })
  .catch((error) => {
    console.error(error); // "Error!" 출력
  });

 

.then() 메서드는 프로미스가 성공적으로 완료되었을 때 호출되며, .catch() 메서드는 실패했을 때 호출된다.

 

async/await

개념

async/await는 프로미스를 더 간단하고 읽기 쉽게 사용하는 방법이다. async 키워드는 함수가 비동기 함수를 나타내도록 하며, await 키워드는 프로미스가 해결될 때까지 기다린 후 그 결과를 반환한다.

사용 방법

async/await를 사용하는 기본적인 방법은 다음과 같다.

// async 함수 정의
async function asyncFunction() {
  try {
    let result = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("Success!");
        // reject("Error!");
      }, 1000);
    });
    console.log(result); // "Success!" 출력
  } catch (error) {
    console.error(error); // "Error!" 출력
  }
}

// async 함수 호출
asyncFunction();

 

await 키워드는 프로미스가 해결될 때까지 기다리며, try/catch 블록을 사용하여 에러를 처리할 수 있다.

 

프로미스와 async/await의 차이점

1. 가독성:
   • async/await는 동기 코드처럼 보이기 때문에 비동기 흐름을 더 쉽게 이해하고 읽기 좋다.
   • 프로미스는 .then()과 .catch() 체인을 사용하여 비동기 흐름을 관리한다..
2. 에러 처리:
   • async/await는 try/catch 블록을 사용하여 에러를 처리할 수 있어 직관적이다.
   • 프로미스는 .catch() 메서드를 사용하여 에러를 처리한다.
3. 구조:
   • async/await는 코드 구조를 간단하게 만들고, 복잡한 비동기 작업을 관리하기 쉽다.
   • 프로미스는 중첩된 .then() 체인으로 인해 콜백 지옥과 비슷한 문제가 발생할 수 있다

 

예제 비교

프로미스 사용 예제

// 프로미스
function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 1000);
  });
}

getData()
  .then((data) => {
    console.log(data); // "Data received" 출력
    return "Processing data";
  })
  .then((message) => {
    console.log(message); // "Processing data" 출력
  })
  .catch((error) => {
    console.error(error);
  });

 

async/await 사용 예제

//async/await 사용 예제
async function fetchData() {
  try {
    let data = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("Data received");
      }, 1000);
    });
    console.log(data); // "Data received" 출력

    let message = "Processing data";
    console.log(message); // "Processing data" 출력
  } catch (error) {
    console.error(error);
  }
}

fetchData();

 

위의 예제에서 볼 수 있듯이 async/await 방식은 동기 코드처럼 간단하고 읽기 쉽게 작성된다. 반면, 프로미스 체인은 .then()과 .catch()를 사용하여 비동기 흐름을 관리한다.