Promise 이해하기

 

지금까지 ajax를 통해 서버에서 비동기적으로 데이터를 받아올 때, 그 다음 동작을 위하여 콜백 함수가 중첩되어 여러 개 연속적으로 사용되는 콜백 지옥(callback hell)을 다수 경험했다. 이러한 문제를 해결하기 위해 Promise나 async/await와 같은 비동기 처리기술이 있는데 이러한 기술을 사용할 경우 중첩된 콜백 함수를 피하고 코드를 더 구조화하여 가독성을 향상시킬 수 있다.

 

즉, Promise는 비동기 작업을 다루기 위한 JavaScript의 객체로, 비동기 작업이 완료되었을 때 또는 오류가 발생했을 때 처리할 수 있는 방법을 제공한다.

 

 

1. Promise 생성

Promise를 생성하려면 new Promise() 생성자를 사용한다. 이 생성자는 하나의 인자를 받으며, 이 인자는 비동기 작업을 수행하는 함수다. 이 함수는 두 개의 콜백 함수를 인자로 받는다. 

• resolve : 비동기 작업 성공 시 호출
• reject : 비동기 작업 실패 시 호출

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  // 성공 시 resolve() 호출
  // 실패 시 reject() 호출
});

 

 

2. Promise 상태

여기서 상태란 Promise의 처리 과정을 의미한다. new Promise()로 프로세스를 생성하고 종료할 때까지 3가지의 상태를 가질 수 있다.

• 대기(pending): 초기 상태로, 비동기 작업이 완료되지 않은 상태
• 이행(fulfilled): 비동기 작업이 성공적으로 완료된 상태로 resolve()가 호출되면 이행 상태이다. 프로미스가 결과값을 반환해준 상태. 이행상태가 되면 then()을 이용하여 처리 결과 값을 받아 사용할 수 있다.
• 거부(rejected): 비동기 작업이 실패한 상태로 reject()가 호출되면 거부 상태. 실패 상태가 되면 실패한 이유를 catch()로 받을 수 있다.

//대기
new Promise();
new Promise((resolve,reject)=> {

})

//이행 Fulfilled
new Promise((resolve,reject)=> {
	resolve();
})


//거부 Rejected
new Promise(function(resolve, reject) {
  reject();
});

 

 

프로미스 처리 흐름- 출처 : MDN

 

3. then()과 catch()메서드

Promise 객체는 .then() 및 .catch() 메서드를 사용하여 비동기 작업의 결과를 처리한다.

• .then() 메서드는 성공한 경우에 실행된다. 비동기 작업이 성공하면 .then() 메서드가 호출되고, 결과 값이 전달된다.
• .catch() 메서드는 실패한 경우에 실행된다. 오류가 발생하면 .catch() 메서드가 호출되고, 오류 정보가 전달 된다.

myPromise
  .then(result => {
    // 성공한 경우
    console.log('성공:', result);
  })
  .catch(error => {
    // 실패한 경우
    console.error('실패:', error);
  });

 

 

4. Promise 체이닝

여러 개의 Promise를 연결하여 비동기 작업을 순차적으로 수행할 수 있는데 이를 Promise chaining이라고 한다. 앞 서 설명한 then() 메서드를 사용하여 체이닝한다.

 

Promise 체이닝을 할 경우 여러 개의 비동기 작업을 순차적으로 실행할 수 있다. 각 단계의 작업이 이전 단계의 작업이 활료된 후에 실행되게 함으로써 오류를 방지할 수 있다. 또한 비동기 작업 중간에 작업을 중단사허가 건너뛸 수도 있다. 이는 특정 조건을 만족하지 않을 때 특정작업을 실행하지 않아도 되는 경우에 유용하다.

 

myPromise
  .then(result1 => {
    // 첫 번째 비동기 작업 성공
    return result1 + 10;
  })
  .then(result2 => {
    // 두 번째 비동기 작업 성공
    console.log('결과:', result2);
  })
  .catch(error => {
    // 실패한 경우
    console.error('실패:', error);
  });