[JS] Javascript의 Promise

 

 

Promise

: promise는 자바스크립트의 내장객체로 Callback 지옥을 해결하기 위해 등장했다.

 promise는 비동기 작업을 수행하고 비동기 작업의 수행이 끝나면 성공/실패 여부에 따라

 then 메서드 또는 catch 메서드를 호출하는 객체

(promise의 상태는 개발자들이 파악한다.)

 

 

Promise의 상태(statement)

- pending : Promise의 연산이 완료되지 않은 상태

- fulfilled : Promise의 연산이 성공적으로 완료된 상태 / resolve()가 호출된 상태

- rejectes : Promise의 연산이 실패한 상태 / reject()가 호출된 상태

 

 

Promise의 메소드(method)

- resolve() : Promise의 상태를 fulfilled 상태로 만들고 결과값을 then메서드로 전달

- rejected() : Promise의 상태를 rejected 상태로 만들고 결과값을 catch메서드로 전달

 

 

Promise의 후속처리 메서드

- then() : resolve 메서드를 통해 전달받은 결과값을 사용해 후속처리를 위한 연산을 수행하고 Promise 객체를 반환

- catch() : rejected 메서드를 통해 전달받은 결과값을 사용해 예외처리를 위한 연산을 수행하고 Promise객체를 반환

- finally() : Promise 성공/실패 여부와 상관없이 무조건 연산을 수행한다.

 

 

Promise 구문

: Promise가 생성되면서 작성한 비동기 코드가 수행(new Promise ((resolve, reject) => { ...비동기 코드...});)

  만약, 성공했다면 then 메서드로 결과값을 전달.

  then 메서드는 내부의 콜백함수를 호출 할 때 전달받은 Promise 결과값을 콜백함수의 매개변수로 전달

  콜백함수 안에서 Promise의 결과값을 받아 처리할 코드를 작성

  then 메서드의 콜백함수 안에서 return 한 값은 then메서드의 결과값으로 반환될 Promise의 결과값으로 사용된다.

  then의 반환값으로 대기중인 Promise를 반환하면 true에서 반환한 Promise는 대기중인 Promise이행여부와 결과값을 따른다.

 

 . then((arg) => {return 'a'}) //Promise가 반환, 그리고 이 Promise는 결과값으로 a를 반환

 .then((arg) -> {} // then은 처리할 작업이 여러개라면 여러개 작성해도 된다.

 .catch((e) => {}) // Promise를 수행하는 과정에서 문제가 생겼다면 catch로 바로 들어가 예외처리가 된다.

 .finally(()=>{}) // Promise의 성공/실패여부와 상관없이 수행된다.

 

 

ex)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

<div id='promise-note' class='note'></div>     <script type="text/javascript">              $('#promise-note').addEventListener('click',(e) => {                          let p1 = new Promise((resolve, reject) => {                 e.target.style.backgroundColor = 'violet';                 setTimeout(() => {                                          let myMoney = Number(prompt('소지금액을 입력하십시오.')); // NUmber로 형변환해준 상태                     let payment = Number(prompt('지불하고자 하는 금액을 입력하십시오.'));                       if(!(myMoney && payment)){                             reject('<br> 정확하지 않은 값이 입력되었습니다.');                       }                         let balance = myMoney - payment;                         if(balance > 0) {                                                          // 소지금액에서 결제금액을 뺀 값이 0보다 크다면 Promise의 상태를 fulfilled 상태로 만든다.                             // resolve 메서드의 매개변수로 넘겨준 값이 Promise가 반환하는 결과값이다.                             resolve([payment,balance]);                                                      } else{                             reject('잔액이 모자랍니다.');                         }                 }, 1000);                              });                                        p1.then((payInfo)=>{ //resolve의 결과값이then으로 전달                 e.target.innerHTML += `<br> 첫번째 then : ${payInfo[0]}원 결제하였습니다.`;                 return payInfo[1];                                  }).then((balance)=> { //첫번째 then에서의 리턴값이 매개변수로 들어온다.                 e.target.innerHTML += `<br>두번째 then : ${balance}원 남았습니다.`;                              }).catch((error)=>{ //reject의 결과값이 error로 전달                 e.target.innerHTML += `<br>${error}`;                              }).finally(()=>{                 e.target.innerHTML += '<br> 이용해주셔서 감사합니다.<br>';                                  })                      })          Colored by Color Scripter

cs

 

-> Promise 성공시 결과값

 

 

-> Promise 실패시 결과값