You will be fine

<Javascript> 10. Promise

by BFine

공부(2018~2019) - 스킨변경전/Javascript

반응형

Javascript Promise

1. Promise 란

  • javascript는 비동기형태 이므로 이전 함수가 실행이 끝나지 않아도 다음 함수가 실행된다.
  • 이런 함수의 콜백을 제어하는 객체가 Promise 이다.

1.1 예시(1)

  • 영화진흥원의 Open REST API 예시를 요청해서 boxofficeType만 추출해서 화면에 나타내는 코드이다.
  • 비동기 형태로 실행되므로 화면에는 아무것도 출력되지 않는다.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
     let url = 'http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice
     /searchDailyBoxOfficeList.json?key=430156241533f1d058c603178cc3ca0e&targetDt=20120101';
 
     let temp = "";
      function getData() {
        $.get(url, function(response){
          console.log(response.boxOfficeResult.boxofficeType);
          temp = response.boxOfficeResult.boxofficeType);
        });
      }
      function write(){
        $("#content").html(temp);
      });
      getData();
      write();
  });
 
</script>
<body>
    <div id="content">
    </div>
</body>
  • 이를 해결하기 위해 콜백함수를 이용한다.
function getData(callbackFn) {
  $.get(url, function(response){
    console.log(response.boxOfficeResult.boxofficeType);
    callbackFn(response.boxOfficeResult.boxofficeType);
  });
}
getData(function (response) {
  $("#content").html(response);
});
  • Promise 객체를 활용하는 방법이다.
function getData(callbackFn) {
  return new Promise(function(resolve,reject){
    $.get(url, function(response){
      console.log(response.boxOfficeResult.boxofficeType);
      resolve(response.boxOfficeResult.boxofficeType);
    });
  });
}
getData().then(function(response){
  $("#content").text(response);
})

2. Promise 처리과정

  • 대기(pending) -> 이행(fulfilled) -> 실패(rejected) 3가지 과정이 있다.
  • new Promise()를 호출하면 대기 상태가 된다.
  • 이떄 콜백 인자로 resolve와 reject를 가질 수 있다.
  • resolve()를 실행하게 되면 이행 상태가 된고 then()을 통해서 결과값을 받을 수 있다.
  • reject()를 실행하게 되면 실패 상태가 되고 catch()를 통해 예외처리를 한다. (이행 이후)

3. 사용하는 이유

  • 위에 처럼 콜백함수를 이용하여 코드를 구현할수도 있다.
  • 하지만 프로젝트가 복잡할수록 데이터를 받아서 처리하는 부분이 많기 때문에 중첩콜백 이 많이 발생할 수 있다.
  • 코드의 가독성 늘리고 복잡성 을 줄이기 위해서 Promise객체를 사용한다.(then를 여러번 사용도 가능하다.)

출처

반응형
저작자표시 비영리

'공부(2018~2019) - 스킨변경전 > Javascript' 카테고리의 다른 글

<Javascript> 12. Namespace  (0) 2019.05.31
<Javascript> 11. Closer  (0) 2019.05.28
<jQuery> 7. Ajax  (0) 2018.04.25
<jQuery> 6. MAP  (0) 2018.04.12
<jQuery> 5. Event object  (0) 2018.04.11

블로그의 정보

57개월 BackEnd

BFine

활동하기

티스토리툴바