017 - 비동기 통신 Ajax Callback 지옥 피하기

프론트 엔드 영역을 개발하다보면 ajax를 많이 사용하게 됩니다. 요즘은 fetch 라는 것도 나와서 fetch도 많이 사용하는 추세 입니다.

 

ajax를 쓰던 fetch를 쓰던 .. 1번 ajax 안에 2번 ajax, 2번 ajax 안에 3번 ajax 를 써서 문자 그대로 Callback 지옥을 만들게 됩니다.

 

이런 Callback 사용은 좋은 프로그래밍이 아니며 나중에 유지보수 할때도 난이도를 어렵게 만드는 요소가 됩니다.

 

이런 상황을 피하고자 나온 방법들이 Promise 와 Asyc await 입니다. 2개는 각각 다른 기능이지만 아래와 같은 상황에서 콜백 지옥을 피하기 위해서 두 기능을 같이 사용하여 풀어낼수 있습니다.

$( document ).ready(async function() {
       
    const callPromise = function(paramUrl) {
      return new Promise((resolve, reject) => {
        $.ajax({
          type: "GET",
          url: paramUrl,
          success: function (respData, textStatus, jqXHR) {
            resolve(respData);
          },
          error: function (xhr, status, error) {
            reject(error);
          }
        });   
      });
    }

     const response = await callPromise('TEST API');
     console.log(response);
});