자바스크립트 Promise: 초보자를 위한 가이드

  자바스크립트의 Promise는 비동기 작업의 최종 완료(또는 실패)와 그 결과 값을 나타내는 객체입니다. 비동기 작업은 예를 들어 서버에서 데이터를 가져오거나, 파일을 읽고 쓰는 작업 등 시간이 걸리는 작업들을 말합니다. Promise는 이러한 작업들이 백그라운드에서 실행되는 동안, 코드의 나머지 부분이 블록 되지 않고 실행될 수 있게 해 줍니다.

Promise의 주요 개념

1. 상태(State):
   • Pending(대기): 초기 상태, 비동기 처리가 아직 완료되지 않음
   • Fulfilled(이행): 비동기 처리가 성공적으로 완료됨
   • Rejected(거부): 비동기 처리가 실패함
2. 값(Value): Promise가 성공적으로 완료되었을 때 반환하는 값
3. 이유(Reason): Promise가 실패한 이유, 즉 에러의 원인

// Promise 생성
let promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  if (/* 비동기 작업 성공 */) {
      resolve(value); // 성공 시 resolve 호출
  } else {
      reject(error); // 실패 시 reject 호출
  }
});

// Promise 사용
promise.then(
  result => { /* 이행(fulfill) 상태 처리 */ },
  error => { /* 거부(reject) 상태 처리 */ }
);

Promise 체이닝

  Promise 체이닝은 JavaScript에서 비동기 작업을 연속적으로 처리할 때 사용되는 효율적인 방법입니다. 이 방식을 사용하면 여러 비동기 작업을 순차적으로 실행하고, 각 작업의 결과를 다음 작업으로 전달할 수 있습니다. 이 과정은 .then(), .catch(), .finally() 등의 메서드를 사용하여 구현됩니다.

  Promise 체이닝의 기본 구조

1. .then() 메서드
   • .then()은 Promise가 성공적으로 이행(fulfilled)됐을 때 실행됩니다.
   • .then()은 두 개의 인자를 받을 수 있는데, 첫 번째는 이행 상태의 콜백 함수, 두 번째는 거부 상태의 콜백 함수입니다.
   • 첫 번째 콜백 함수의 반환 값은 다음 .then()의 콜백 함수의 인자가 됩니다.
2. .catch() 메서드
   • .catch()는 Promise가 거부(rejected)됐을 때 실행됩니다.
   • 주로 에러 처리에 사용됩니다.
3. .finally() 메서드
   • .finally()는 Promise의 성공/실패 여부에 관계없이 실행됩니다.
   • 주로 정리 작업에 사용됩니다.

function firstFunction() {
  return new Promise((resolve, reject) => {
      // 비동기 작업 수행
      resolve(1);
  });
}

function secondFunction(value) {
  return new Promise((resolve, reject) => {
      // 비동기 작업 수행
      resolve(value + 1);
  });
}

function thirdFunction(value) {
  return new Promise((resolve, reject) => {
      // 비동기 작업 수행
      resolve(value + 1);
  });
}

firstFunction()
  .then(result => secondFunction(result))
  .then(result => thirdFunction(result))
  .then(result => console.log(result)) // 출력: 3
  .catch(error => console.error(error))
  .finally(() => console.log('Completed'));