JavaScript의 Promise 사용 방법

JavaScript

JavaScript의 Promise 사용방법에 대해서 알아보자.

JavaScript의 Promise 사용 방법

Promise 란?

JavaScript에서 Promise는 비동기 작업의 성공 또는 실패를 나타내는 객체이다. 비동기 작업이 완료된 후 결과값을 반환하거나, 작업이 실패했을 때 이유를 알려주는 데 사용된다. 쉽게 말해, Promise는 현재 상태를 나타내며, 이를 통해 비동기 코드를 더 직관적으로 작성할 수 있다.

Promise의 상태 (States)

Promise는 아래 세 가지 상태를 가진다:

  1. Pending (대기): 초기 상태, 아직 결과가 결정되지 않은 상태.
  2. Fulfilled (이행): 작업이 성공적으로 완료되어 결과를 반환한 상태.
  3. Rejected (거부): 작업이 실패하고 에러를 반환한 상태.

Promise의 상태는 한 번 결정되면 변경되지 않는다.

Promise 사용 방법

  1. Promise 생성

Promise 객체는 new Promise 생성자를 사용하여 생성한다. 생성자는 두 가지 매개변수 resolve와 reject를 가진 콜백 함수를 받는다.

const myPromise = new Promise((resolve, reject) => {
  const success = true;
 
  if (success) {
    resolve('작업 성공!'); // 성공 시
  } else {
    reject('작업 실패!'); // 실패 시
  }
});
  1. then, catch, finally 메서드
  • then: Promise가 이행(fulfilled)될 때 실행된다.
  • catch: Promise가 거부(rejected)될 때 실행된다.
  • finally: Promise의 성공 여부와 상관없이 항상 실행된다.
myPromise
  .then((result) => {
    console.log(result); // "작업 성공!"
  })
  .catch((error) => {
    console.error(error); // "작업 실패!" (에러 발생 시)
  })
  .finally(() => {
    console.log('작업 종료');
  });

Promise를 사용한 예제: API 호출

다음은 fetch API를 사용하여 데이터를 가져오는 비동기 작업을 Promise로 처리하는 예제이다.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    const url = 'https://jsonplaceholder.typicode.com/posts/1';
 
    fetch(url)
      .then((response) => {
        if (!response.ok) {
          reject('데이터를 가져오지 못했습니다.'); // HTTP 에러 처리
        }
        return response.json();
      })
      .then((data) => resolve(data)) // 성공적으로 데이터 가져오기
      .catch((error) => reject(error)); // 네트워크 에러 처리
  });
};
 
fetchData()
  .then((data) => {
    console.log('데이터 가져오기 성공:', data);
  })
  .catch((error) => {
    console.error('에러 발생:', error);
  });

async/await와 Promise

async/await은 Promise 기반의 비동기 코드를 더 간단하고 직관적으로 작성할 수 있게 도와준다.

const fetchDataAsync = async () => {
  try {
    const response = await fetch(
      'https://jsonplaceholder.typicode.com/posts/1'
    );
    if (!response.ok) throw new Error('데이터를 가져오지 못했습니다.');
 
    const data = await response.json();
    console.log('데이터 가져오기 성공:', data);
  } catch (error) {
    console.error('에러 발생:', error);
  } finally {
    console.log('작업 종료');
  }
};
 
fetchDataAsync();

Promise의 장점

  • 콜백 지옥 해결: Promise는 코드의 가독성을 높여 콜백 중첩 문제를 해결한다.
  • 에러 처리: catch를 사용하여 에러를 일관성 있게 처리할 수 있다.
  • 체인 가능: 여러 비동기 작업을 순차적으로 처리할 수 있다.

정리

Promise는 비동기 작업을 관리하는 강력한 도구다. 기본적인 사용법을 익힌 후, async/await와 함께 사용하면 더 효율적이고 가독성 높은 코드를 작성할 수 있다. Promise는 특히 네트워크 요청이나 파일 읽기/쓰기 같은 작업에서 유용하게 사용된다.