[Javascript] 비동기 처리(2) - Promise 객체

콜백 함수를 연속적으로 호출해야 되는 환경에서 구현 복잡도를 낮추고 가독성을 높일 수 있는 방법이 있다고 한다.
바로 객체를 이용한 방법인데, 약속된 객체를 사용함으로써 해당 함수가 비동기 처리를 하고 있음을 나타내고 분리된 결과 값을 만들어 낼 수 있다.

이때 결과값은 비동기 처리가 성공/실패 했을 때의 값으로 나뉘며 Promise 객체는 자신을 생성한 주체 함수로 전달된 인자를 그대로 사용할 수 있다.

구조적인 콜백 함수의 특성을 객체 지향적으로 분리한 방법인듯 보이는데, Promise라는 객체를 반환함으로써 이를 오브젝트로 저장할 수 있게끔 만든 것이다.

일단 예시를 보자. 지난 글과 비교해보면 더 이해하기 쉬울 것이다.

 

function A(a,b){
  return new Promise((suc, fail) =>{
    setTimeout(()=>{
      const res = a+b;
      suc(res);
      fail(new Error ("fuck!"));
    }, 2000); 
  });
}

function B(a){
  return new Promise((suc, fail)=>{
    setTimeout(()=>{
      const res = a*2;
      suc(res);
      fail(new Error ("fuck!"));
    }, 1000);
  });
}

function C(a){
  return new Promise((suc, fail)=>{
    setTimeout(()=>{
      const res = a/2;
      suc(res);
      fail(new Error ("fuck!"));
    }, 1000);
  });
}

const PromiseObjectOfB = A(5,4).then((resultA)=>{
  console.log("A result = ", resultA);
  return B(resultA);
});

const PromiseObjectOfC = PromiseObjectOfB.then((resultB)=>{
  console.log("B result = ", resultB);
  return C(resultB);
});

PromiseObjectOfC.then((resultC)=>{
  console.log("C result = ", resultC);
});

지난번 <비동기 처리> 글에서 작성했던 예시와 비교해보자.

 > function A(a,b)
우선 함수의 매개변수를 보면 콜백함수를 받던 세 번째 인자가 빠졌다.
또, 선두에서 즉시 값을 리턴하는데 잘 보면 Promise라는 객체를 새로 할당하고 내부에서 콜백함수를 호출하고 있다.

Promise 객체는 비동기 작업이 수행될 수 있는 상황인지 아닌지에 대한 결과값을 담고 있다.

해당 객체는 2개의 값을 전달받는데 suc은 성공했을 때, fail은 실패했을 때의 값이 전달된다.
이는 일종의 예외처리라고도 볼 수 있으며 성공/실패에 따라 반환할 값이나 호출할 함수를 직접 지정할 수 있다.

여기서 말하는 실패는 비동기 처리의 실패를 말하는 것이지 연산 오류를 뜻하는게 아니다.

비동기 객체의 경우 세 가지 상태를 가질 수 있는데 대개 성공, 실패, 보류로 나뉜다.
보류 상태일 땐 Pending, 성공했을 경우 Fulfilled, 실패했을 때 Rejected 상태라 부르는데 suc은 비동기 호출이 성공했을 때의 값이며 fail은 비동기 호출이 실패했을 때의 값이다.

 

이를 각각 resolve와 reject라는 명칭으로 부르지만 예시에선 suc과 fail로 표현했다.

사용법은 본문을 참고하되 실용적이지 않으므로 응용 방법에 대해선 따로 공부해야 된다.