[JS] 프로미스(Promise)

콜백 지옥

function fn() {
    setTimeout(() => {
        console.log('하나');
        setTimeout(() => {
            console.log('둘');
            setTimeout(() => {
                console.log('셋');
            }, 0);
        }, 0);
    }, 0);
}
fn(); // 결과 순서 => '하나', '둘', '셋'

자바스크립트는 비동기 처리를 위해 콜백함수를 사용하는데 콜백함수를 반복적으로 사용하는 경우에 콜백 지옥에 빠지게 된다. 콜백 지옥 현상은 코드의 가독성을 떨어뜨리기 때문에 이러한 콜백 지옥을 탈출하기 위해서 프로미스를 사용한다.

---

프로미스(Promise)

• 비동기 처리에 사용되는 객체
• 콜백 지옥 현상이 일어나지 않아 코드의 유지 보수성이 증가
• 비동기 처리 시점을 명확하게 표현할 수 있게 해줌

 

프로미스는 객체이기 때문에 생성자 함수를 호출하여 인스턴스화 할 수 있다. 프로미스의 생성자 함수는 resolve와 reject함수를 인자로 갖는 콜백 함수를 인자로 전달받고 프로미스는 전달받은 콜백 함수를 내부에서 비동기 처리하게 된다.

 

프로미스의 상태

프로미스는 비동기 처리가 성공(fulfilled) 또는 실패(rejected)의 상태 정보를 갖게된다. resolve 함수가 호출된 경우 성공한 상태가 되며,  reject 함수가 호출된 경우 실패 상태가 된다.

 

프로미스를 이용한 비동기 처리 예제

function taskA(a, b) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a + b;
      resolve(res);
    }, 3000);
  });
}

function taskB(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a * 2;
      resolve(res);
    }, 1000);
  });
}

function taskC(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a * -1;
      resolve(res);
    }, 2000);
  });
}

프로미스를 이용하여 세 가지의 비동기로 동작하는 함수를 만들어준 모습이다.

 

taskA(5, 1)
  .then((a_res) => {
    console.log("A RESULT : ", a_res);
    return taskB(a_res);
  })
  .then((b_res) => {
    console.log("B RESULT : ", b_res);
    return taskC(b_res);
  })
  .then((c_res) => {
    console.log("C RESULT : ", c_res);
  });
  
  // A RESULT : 6
  // B RESULT : 12
  // C RESULT : -12

후속 처리 메소드인 then을 통해 비동기를 제어하는 모습이다.

---