자바스크립트의 비동기 처리에 대하여 - (2) Promise

비동기적으로 실행하는 작업의 결과(성공 or 실패)를 나타내는 객체이다. 여기서 주목해야 하는 점은 객체 라는 것인데, 비동기의 결과를 객체화 시킨다는 점이 Promise의 가장 큰 장점이자 특징이 된다.

사용 방법

Promise 만들기

const promise = new Promise((resolve, reject) => {
  /*
  비동기 작업 성공시 resolve()를 호출하고,
  비동기 작업 실패시 reject()를 호출하도록 구현한다.
  */
})

Promise 성공 시 resolve를 호출하고 실패 시 reject를 호출한다.

const promise = new Promise((resolve, reject)=>{
	//처리 내용
})
 
promise.then(
	//resolve가 호출되면 then이 실행
)
.catch(
	//reject가 호출되면 catch가 실행
)
.finally(
	//콜백 작업을 마치고 무조건 실행되는 finally (생략 가능)
)

Promise 다음엔 then()과 catch()를 사용한다.
then()은 생성한 프로미스 객체에서 인수로 전달한 resolve 가 호출되면 실행된다.
catch()는 생성한 프로미스 객체에서 인수로 전달한 resolve 가 호출되면 실행된다.

예제

1초 뒤에 랜덤한 숫자가 5이상이면 성공하고, 5보다 작으면 실패하는 경우. Promise 객체 생성 방법

var timeAttack = new Promise(function (resolve, reject) {
  setTimeout(function () {
    var ran = Math.random() * 10;
    if (ran >= 5) {
      resolve(ran);
    } else {
      reject();
    }
  }, 1000);
});

이 경우에 timeAttack 이라는 Promise 객체는 3가지 상태를 가진다.

대기(pending) : 아직 실행되지 않은 초기 상태
이행(fulfilled) : 작업이 성공적으로 완료됨.
거부(rejected) : 작업이 실패함.

작업이 성공적으로 이행이 되었거나, 실패 했을 때, 어떠한 작업을 해야 하는데 이 작업은 then 메소드에 의해 실행된다. 이는 callback함수를 실행한 것과 같은 효과를 낸다. then 메소드는 promise객체에 붙여서 사용한다.

timeAttack.then(function (num) {
  console.log(num + 'complete');
}, function () {
  console.log('error');
});

promise.then(successCallback, failureCallback) 이러한 방식으로 콜백을 실행할 수 있다.

then() Method
then 메소드는 promise객체를 리턴하고 두 개의 콜백 함수를 인수로 받는다. 사용 형태는 다음과 같다.

promise.then(successCallback, failureCallback)

promise.then(function (value) {
  //성공했을 때 실행
}, function (reason) {
  //실패했을 때 실행
});

위에 적은 successCallback 은 promise가 성공(fulfilled)했을 때를 위한 콜백 함수이고, failureCallback 은 실패(rejected)했을 때를 위한 콜백 함수이다.

참고자료

비동기적 방식 처리 방법 (Callback, Promise, async &await)
JavaScript 비동기 처리를 위한 promise 이해하기