자바스크립트 심화(13) 프로미스 비동기 실행

프로미스를 실제 사용할 때 가장 편리한 부분은 비동기와 병렬처리에 있다. 비동기와 병렬처리에 앞서 콜벡함수를 활용해서 프로미스를 넘기는 부분부터 알아보자. 

자바스크립트에서는 다음과 같이 함수의 반환값으로 프로미스 객체를 넘길 수 있다. 자바스크립트 함수는 한계가 없다. 뭐든지 넘길 수 있다;

1 프로미스 넘기기

function buyButton(mymoney){            return new Promise(function(resolve,reject){  //①              setTimeout(function(){                        let payment = prompt("지불할 금액을 입력하세요.");                        let balance = mymoney - payment;                  if(balance > 0){ //②                       console.log(`지불한 금액은 ${payment}입니다. `)                       resolve(balance)                  }else{                       reject(`잔액은 ${mymoney}입니다. 잔액이 부족합니다.`);                 }   },1000);             });   }    buyButton(500)    //③ .then(function(balance){            console.log(`잔액은 ${balance}입니다.`)     }) .catch(function(err){    console.log(err) });

①에서 buyButton()함수는 new Promise()값을 반환하고 있다. payment는 setTimeout()함수 내부에서 사용자 값을 받는 기능으로 사용되고, balance변수는 사용자가 입력한 값과 buyButton()함수의 인자값을 뺄셈한다.(거스름돈 개념) ②을 보자. balance(잔돈)값이 0보다 크다면 성공이다. resolve()값이 then메서드로 넘어간다. 

③에서 500을 입력하면 위에서 만든 프로미스에 의해 계산된 balance값을 then메서드 결과값으로 가져올 수 있다.

2 비동기실행

위의 코드를 비동기로 실행해보자. then()메서드의 끝에 buyButton(balance)를 입력(콜벡)하면, balance값이 계속 반환된다. 그 결과 다른 실행함수가 있더라도 then()메서드가 비동기적으로 실행된다. 

function buyButton(mymoney){         return new Promise(function(resolve,reject){              setTimeout(function(){                        let payment = prompt("지불할 금액을 입력하세요.");                        let balance = mymoney - payment;                  if(balance > 0){                       console.log(`지불한 금액은 ${payment}원 입니다. `)                       resolve(balance)                  }else{                       reject(`잔액은 ${mymoney}입니다. 잔액이 부족합니다.`);                 }   },1000);           });   }    buyButton(500) .then(function(balance){           console.log(`잔액은 ${balance}원 입니다.`);           return buyButton(balance);       }) .then(function(balance){          console.log(`잔액은 ${balance}원 입니다.`);          return buyButton(balance);    }) .then(function(balance){         console.log(`잔액은 ${balance}원 입니다.`);         return buyButton(balance);   }) .catch(function(err){    console.log(err) });

100을 연속 3번으로 입력해보자. 결과값은 아래와 같이 100씩 떨어질 것이다. 

//지불한 금액은 100원 입니다.

//잔액은 400원 입니다.

//지불한 금액은 100원 입니다.

//잔액은 300원 입니다.

//지불한 금액은 100원 입니다.

//잔액은 200원 입니다.

위의 코드에서는 모든 then메서드가 같은 Promise객체를 반환한다. 만일 then마다 다른 Promise객체를 반환하게 하면 각자 다른 비동기 처리를 연결해서 순차적으로 실행할 수 있다. 만일 then에 각자 다른 프로미스를 받는다면 코드는 아래와 같다.

function buyButton(money){       let obj = new Promise(function(resolve,reject){                   let obj2 = {}  //객체 선언                    obj2.a1 = 'a1프로미스' +money;                    obj2.a2 = 'a2프로미스' +money;                 resolve(obj2);                 reject(`에러입니다.`);       });      return obj } function buyButton2(money){     let obk = new Promise(function(resolve,reject){                   let obk = {}                    obk.a1 = 'b1프로미스' +money;                    obk.a2 = 'b2프로미스' +money;                 resolve(obk);                    reject(`에러입니다.`);       });     return obk }    buyButton(500).then(function(obj){           console.log(obj.a1);            return buyButton2(500);    }).then(function(obj){           console.log(obj.a1);           return buyButton(300);   }).catch(function(err){      console.log(err);   })

위의 코드에서는 프로미스를 선언한 함수가 2개 존재(buyButton,buyButton2) 한다. 그리고 then메서드의 반환값으로 다른 프로미스가 선언된 함수를 반환한다면 결과값도 다음과 같이 다르게 나온다.

// a1 프로미스 {money값}

// b1 프로미스 {money값}

프로미스 ::『효율성』

비동기적 방식으로 프로미스를 사용하면 코드를 효율적으로 사용할 수 있다. 다른 기능을 갖고 있는 프로미스 객체를 여러 개 선언한 이후, then메서드로 불러오기만 하면 쉽게 결과값을 얻을 수 있다. 하지만 프로미스 객체를 계속 연결하다보면 성능저하가 발생할 수 있는데, 이를 방지하기 위해서 등장한 방법이 '프로미스 병렬처리'다. 

다음 포스팅에서 병렬처리에 관해 알아보자.