ajax에서 promise 쓰기

프로젝트를 하다보면 비동기 처리를 할 때가 많다.

내가 짠 코드를 예로 들면 이런 것이다.

function requestPay() {
    IMP.request_pay({
      pg: "kcp.INIBillTst",
      pay_method: "card",
      merchant_uid: "IMP" + makeMerchantUid,   // 주문번호
      name: "인터넷강의 수강신청",
      amount: 500,                         // 숫자 타입
      buyer_email: "이메일주소",
      buyer_name: "권보미",
      buyer_tel: "전화번호",
      buyer_addr: "주소",
      buyer_postcode: "우편번호"
    }, function (rsp) { // callback
          console.log(rsp);
      if(rsp.success) {
          alert('결제가 완료되었습니다.');
          paymentComplete = true;
      } else {
          alert('결제에 실패하였습니다. 에러 내용 : ' + rsp.error_msg);
          paymentComplete = false;
      }

      // 콜백 함수 내에서 두번째 ajax 통신 시작
      $.get('doRegisterAfterPayment', {
            classId : ${group.id},
            paymentComplete : paymentComplete
        }, function(data) {
            alert(data);
            location.replace('/');
        }, 'text');

    });
  }

ajax로 controller에 갔다왔다가 가져온 결과로 다시한번 더  ajax 통신을 해야할 때가 있는데

callback 함수 안에서 무작정 다시 ajax를 쓰는건 쫌 위험하다.

왜냐면 내가 원하는 순서대로 함수가 실행되지 않기 때문!!

ajax로 요청하고 아직 결과를 받아오지도 않았는데 계속 다음 함수의 결과를 요구하는

콜백 지옥에 빠질 수도 있다! 그때 쓸 수 있는 방법이 promise, 그리고 걔를 더 잘 쓸수 있도록 돕는것이 async, await이다.

promise는 ajax를 실행한 후 성공했을땐 resolve, 실패했을때는 reject로 인자를 전달하고 then 또는 catch로 받아서 할 일을 순차적으로 수행해주는 것임!! promise는 선언되는 순간 함수가 자동 실행되기 때문에 클릭해야만 실행되는 함수같은 경우 주의해서 써야한다.

https://tangoo91.tistory.com/42

[JavaScript] 자바스크립트 비동기 처리와 AJAX, promise(프로미스)

https://velog.io/@holicholicpop/AJAX-new-Promise

AJAX _ new Promise

https://learnjs.vlpt.us/async/02-async-await.html

02. async/await · GitBook

https://ko.javascript.info/async-await

async와 await

위 글들을 잘 읽어보고 ajax에 적용해보도록 하자.