jQuery & XMLHttpResponse

보통, jQuery를 사용하니까, 서버에 JSON 을 요청하는 경우 다음과 같이 사용합니다.

$.ajax({
  ...
  success: function(data) {
    ...
  }
});

이런 식으로 사용하게 되는데 이것만으로는 쉽게 복잡한 코드가 될 수 있습니다. $.ajax()의 반환 타입이 jqXHR이라는 타입으로 XMLHttpRequest를 wrapping하여 사용하는데, 조금 더 순화해서 사용한다면 아래와 같이 정리할 수 있을 것 같습니다.

$.ajax({
  ...
})
.done( function(data, textStatus, jqXHR) {
  ...
});

이번에는 조금 더 Promise스러운 느낌이 듭니다. 하지만, Vanila JS기준으로 작업을 한다면, jQuery는 사치입니다. 아무래도, XMLHttpRequest를 직접적으로 사용해야겠죠. MDN의 Using XMLHttpRequest에서 발췌한 코드는 다음과 같습니다.

var oReq = new XMLHttpRequest();

oReq.onload = function() { ... }; // onLoadCallback
oReq.open("GET", url);
oReq.responseType = 'arraybuffer';
oReq.send();

그렇습니다. callback이 시작되었습니다. 확실히, 오래전에 고안된 API라서 변화된 상황을 반영하지 못합니다.

Fetch

Fetch는 XMLHttpRequest의 노후화된 점을 개선하고자 고안되었습니다. 간단히 말해서, XMLHttpRequest의 Promise 지원 버전이라고 할 수 있습니다.(Promise에 생소하다면, Jake Achibald의 JavaScript Promises를 참고하시기 바랍니다.)

Fetch에 대한 자세한 정의는 MDN을 참고하겠습니다.

Fetch API는 XMLHttpRequest와 매우 흡사하다. 그러나, 이 새로운 API는 더욱 강력하고 유연한 기능을 제공한다. Fetch는 Request와 Response로 구성되며, Service Workers, Cache API와같은 서비스에서 사용되어 질 것이다.

Service Worker는 새로운 브라우저 기능으로 독립적으로 이벤트 처리를 하기 위해서 고안된 서비스입니다.

혹시, 감이 오지 않는 분을 위해서, Google Developers의 Introduction to Fetch()를 인용하겠습니다.

fetch()는 XHR과 비슷한 network request를 만들 수 있습니다. 가장 큰 차이점은 Fetch API가 Promises를 사용한다는 점입니다. 이는 콜백 지옥을 피하고 복잡하고 어려웠던 XMLHttpRequest의 API를 기억하지 않아도 되며, 보다 간단하고 깔끔한 API를 가능토록 합니다.

예제 코드는 이미 많고, 사용법도 단순하기에 생략토록 하겠습니다. 필요하신 분은 아래의 MDN에서 확인하실 수 있습니다.

제약

훨씬 간결한 코드를 위해서라도, 당장 XMLHttpRequest를 대체하고 싶으시겠지만 지원하지 않는 브러우저들이 있습니다. Specification이 제정 중이며, 아직은 실험적인 단계입니다. Fetch API에 따르면, IE는 사실상 사용할 수 없습니다. 하지만, HTML5와 마찬가지로 polyfill이 제공되고 있습니다.(코드를 살펴보시기를 추천합니다. 간결하면서도 공부하기 좋았습니다.)

References