[JavaScript] ES6 프로미스(Promise)

 

프로미스(Promise)

프로미스(Promise)는 성공하면 then()안의 코드를, 실패하면 catch()안의 코드를 실행해주는 함수 입니다.

동기방식을 비동기방식으로 바꿔주는 함수가 아닙니다.

 

Promise 코드를 작성할 때 성공과 실패 상황을 알 수 있도록 해야 합니다.

 

콜백함수 디자인패턴이 마음에 안드는 분들은 Promise 디자인패턴을 사용하시면 됩니다.

Promise는 자바스크립트의 새로운 기능이라기보다는 코드/함수 디자인 패턴일 뿐입니다.

 

Promise의 구조는 이렇게 됩니다.

 

var promise1 = new Promise();

promise1.then(function(){
    // 프로미스가 성공했을 경우 실행할 코드1
}).then(function(){
    // 프로미스가 성공했을 경우 실행할코드2
}).catch(function(){
    // 프로미스가 실패했을 경우 실행할 코드
}).finally(function(){
    // 성공이든 실패든 프로미스가 호출되었을때 실행되는 코드
})

 

var 변수명 = new Promise(); 를 사용하여 Promise를 사용할 수 있습니다.

 

then() : 프로미스 안에 작성한 코드가 성공했을 경우 실행할 코드

catch() : 프로미스 안에 작성한 코드가 실패했을 경우 실행할 코드

finally() : 프로미스 안에 작성한 코드가 성공/실패의 경우와 상관없이 실행할 코드

 

위와 같은 프로미스 코드 결과에 따른 실행이라는 장점으로 인해 콜백함수를 사용할 때 Promise를 사용하게 됩니다.

 

 

아래는 Promise 외부에서 값을 가져와 3초 뒤 연산하여 결과값에 따른 실행을 나타내고 있습니다.

var num1 = 1;
var num2 = 1;

var promise1 = new Promise(function(res,rej){
    setTimeout(function(){
      var sum = this.num1 + this.num2;
      
      if(sum === 2){
        res(sum);
      } else {
        rej();
      }
    }, 3000);
});

promise1.then(function(result){
    console.log('결과는 ' + result + ' 입니다.');
}).catch(function(){
    console.log('실패 입니다.');
})

 

 

Promise의 세가지 상태

Pending : 프로미스가 대기 혹은 실행중이며 성공/실패가 정해지지 않은 판정 대기중인 상태

Resolved : 프로미스 실행이 완료되어 성공인 상태

Rejected : 프로미스 실행이 완료되어 실패한 상태