본문 바로가기
JavaScript 문법 시리즈

[JavaScript 문법] 23일차: 프로미스 기초

by cogito21_js 2024. 8. 23.
반응형

프로미스란?

프로미스(Promise)는 비동기 작업을 처리하기 위한 객체로, 콜백 함수의 단점을 해결하는 데 유용합니다. 프로미스는 세 가지 상태를 가질 수 있습니다:

  1. 대기(pending): 초기 상태, 비동기 작업이 아직 완료되지 않은 상태.
  2. 이행(fulfilled): 비동기 작업이 성공적으로 완료된 상태.
  3. 거부(rejected): 비동기 작업이 실패한 상태.

프로미스 생성

프로미스를 생성하려면 new Promise 구문을 사용합니다. 프로미스 생성자는 두 개의 콜백 함수를 인수로 받습니다: resolvereject.

예제

let promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  let success = true;

  if (success) {
    resolve('작업 성공');
  } else {
    reject('작업 실패');
  }
});

then 메서드

then 메서드는 프로미스가 이행(fulfilled)되었을 때 호출됩니다. then 메서드는 두 개의 콜백 함수를 인수로 받을 수 있습니다: 첫 번째는 성공 시 호출되는 함수, 두 번째는 실패 시 호출되는 함수입니다.

예제

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('작업 성공');
  }, 1000);
});

promise.then(
  (message) => {
    console.log(message); // '작업 성공' (1초 후 출력)
  },
  (error) => {
    console.error(error);
  }
);

catch 메서드

catch 메서드는 프로미스가 거부(rejected)되었을 때 호출됩니다. 이는 then 메서드의 두 번째 인수로 에러 처리를 하는 것과 동일합니다.

예제

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('작업 실패');
  }, 1000);
});

promise
  .then((message) => {
    console.log(message);
  })
  .catch((error) => {
    console.error(error); // '작업 실패' (1초 후 출력)
  });

프로미스 체이닝

프로미스 체이닝(Promise Chaining)은 여러 프로미스를 순차적으로 실행하는 방법입니다. then 메서드는 항상 새로운 프로미스를 반환하므로, 여러 then 메서드를 연결하여 사용할 수 있습니다.

예제

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('1단계 완료');
  }, 1000);
});

promise
  .then((message) => {
    console.log(message); // '1단계 완료' (1초 후 출력)
    return '2단계 완료';
  })
  .then((message) => {
    console.log(message); // '2단계 완료'
    return '3단계 완료';
  })
  .then((message) => {
    console.log(message); // '3단계 완료'
  })
  .catch((error) => {
    console.error(error);
  });

프로미스 상태 확인

프로미스는 세 가지 상태를 가질 수 있습니다: 대기(pending), 이행(fulfilled), 거부(rejected). 이를 통해 비동기 작업의 상태를 관리할 수 있습니다.

예제

let promise = new Promise((resolve, reject) => {
  let success = true;

  if (success) {
    resolve('작업 성공');
  } else {
    reject('작업 실패');
  }
});

promise
  .then((message) => {
    console.log('이행:', message);
  })
  .catch((error) => {
    console.error('거부:', error);
  });

프로미스의 장점과 단점

장점

  1. 가독성 향상: 프로미스를 사용하면 콜백 지옥 문제를 해결하고, 코드의 가독성을 높일 수 있습니다.
  2. 에러 처리 개선: catch 메서드를 사용하여 비동기 작업에서 발생하는 에러를 보다 일관성 있게 처리할 수 있습니다.
  3. 체이닝: 프로미스를 체이닝하여 여러 비동기 작업을 순차적으로 처리할 수 있습니다.

단점

  1. 구문 복잡성: 초기 설정과 사용법이 다소 복잡할 수 있습니다.
  2. 디버깅 어려움: 비동기 작업에서 발생하는 에러를 추적하고 디버깅하는 것이 어려울 수 있습니다.

결론

프로미스는 비동기 작업을 처리하기 위한 객체로, 콜백 함수의 단점을 해결하는 데 유용합니다. 이번 글에서는 프로미스의 기본 개념, 생성, then 메서드, catch 메서드, 프로미스 체이닝, 프로미스 상태 확인, 장점과 단점에 대해 배웠습니다. 다음 글에서는 프로미스 고급 주제에 대해 알아보겠습니다.

다음 글에서 만나요!

반응형