[ES6] Ajax(Callback, Promise, Async&Await)

Ajax는 전체페이지를 리로드 하지 않고 페이지의 일부분만 동적으로 변환시키기 위해 사용한다.

Ajax를 사용할 땐 꼭 비동기식을 사용해야하는데 이유는 이렇다.

 

"It's asynchronous in that it doesn't lock up the browser."

"브라우저를 잠그지 않는다는 점에서 비동기식입니다."

 

Ajax를 호출 시에 브라우저가 멈추지 않는다는 뜻이다. Ajax의 특징은 이만하면 됐고 기술론적 이야기를 해보자.

1. CallBack

$.ajax({
	url: "input url_1",
	type: "post",
    data: data,
	success: function(res_1) {
        $.ajax({ //콜백지옥
         	url: "input url_2",
         	type: "post",
         	data: res_1,
         	success: function(res_2) {
             	alert(res_2);
         	},
         	error: function(error) {
         		alert(error);
         	}
		})
	},
    error: function(error) {
        alert(error);
    }
})

var opt = {
   	    url: p_url, type: 'POST',
   	    success	: function(data) {
			~

   	    }, error {

   		}
};
$(p_formId).ajaxSubmit(opt); //위와 다르게 data를 임의의 데이터가 아닌 항상 form 전체를 보내기 때문에
//ajaxSubmit이 권장된다.

위와 같이 사용하는 것이 일반적으로 JSP/Servlet + Jquery에서 사용하던 방식이다.

한번 사용하는 데에 있어서 굉장히 많은 문구를 입력해야 하다보니 가독성의 문제로 보통은 '공통 함수'로 처리해야했고,

또 다른 문제는 2개 이상의 ajax를 사용했을 시에 비동기 사용으로 인한 ajax의 순서의 문제가 있었다.

 

이 순서의 문제는 예를들어, 조회 Ajax 처리 후 가져온 데이터로 저장 Ajax 처리를 진행할 시에 뒤에 처리돼야할 Ajax가 먼저 처리 될 수도 있는 단점이 있어서 아래처럼 첫번째 ajax가 완료되고나면 콜백 펑션(success가 완료된 시점) 내에 다시 ajax를 호출하는 방식으로 사용할 수 밖에 없었다. 이렇게 사용 하면 당연히 콜백 밖에서는 비동기에서 온 값을 알 수가 없는게 일반적이고 아래와 같이 공통을 사용하더라도 무분별한 콜백 사용으로 인해 콜백 지옥에 갇히게 된다.

do1(function(result) {
  do2(result, function(result_2) {
    do3(newResult, function(result_3) {
      console.log(result_3);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

 

2. Promise

do1()
.then(result_2 => do2(result))
.then(result_3 => do3(result_2))
.then(finalResult => console.log(result_3)
.catch(failureCallback);

위에서 Callback의 단점이라 한다면 깊이(Depth)가 깊어진다는 단점이 있고 유지보수 문제로 인해 추가/수정이 너무 느리다는 단점이 있다.
이를 보완하기 위해 Promise가 ES6부터 생겼다. then을 사용함으로써 Depth 1로 끝난다는 장점이 있다.

또한 failureCallback이 콜백 지옥의 예제에서는 3번이 사용된 반면에 Promise는 1번만 사용하는 장점도 있다. 다만 Promise도 then의 무분별한 사용으로 인해 가독성이 떨어진다는 단점이 있다.

3. Async / Await 

async function getAsyncAwait() {
        let res1;
        let res2;
        let res3;
        
        try {
            res1 = await addPromse(10);
            console.log(`first: ${res1}`); // first: 20
        } catch(error) {
            console.log(error);
        }

        try {
            res2 = await addPromse(res1);
            console.log(`second: ${res2}`); // second: 40
        } catch(error) {
            console.log(error)
        }

        try {
            res3 = await addPromse(res2); 
            console.log(`third: ${res3}`); // third: 80
        } catch(error) {
            console.log(error);
        }
    }

    getAsyncAwait();

ES8부터 등장했다. Async/Await는 기본적으로 Callback을 버리고 Promise를 쓰던 것 과는 달리 Promise를 버린 새로운 기술을 도입한 것은 아니다. 왜냐면 await 앞에 오는 것은 항상 Promise의 객체를 사용해야 하기 때문이다. 즉, Promise를 어떻게 더 잘 쓸 것 인지에 대한 보조 도구인 것이지 기본적인 틀은 Promise다.
Async를 사용하면 여태까지의 비동기 코드의 연속성 문제를 아예 뿌리째 해결해버려서 위와 같이 비동기 코드가 동기 코드처럼 읽히게 해줘서 코드 흐름을 이해 하기 쉽다.

 

 

Feat. Axios와 Fetch

Axios와 Fetch는 기본적으로 ajax를 사용할 때 JQuery를 사용하여 보다 간편하게 구현했던 것 처럼 Promise를 보다 간편하게 사용하기 위한 기술이다.