비동기 프로그래밍(Callback, Promise, Async&await)과 AJAX - 4

비동기 프로그래밍에 대해 학습하던 중 Callback, Promise, Async&await, AJAX, XMLHttpRequest, fetch API에 대한 개념을 보다 명확하게 정리하고자 작성하는 글입니다.

 

3편은 Async&await에 대해서 알아보았습니다. 이로써 Callback, Promise, Async&await에 대해서 모두 학습하게 되었습니다.

비동기와 관련해서 검색을 해보면 AJAX, Fetch API, XMLHttpRequest 에 대한 내용들도 많이 등장하는 것을 볼 수 있습니다.

 

그렇다면 앞에서 배웠던 Callback, Promise, Async&await와는 어떤 차이가 있는걸까요?

 

AJAX(Asynchronous Javascript And XML)

AJAX는 HTTP를 효율적으로 이용하기 위하여 등장한 기술입니다.

 

AJAX를 사용하기 전에 XHR(XMLHttpRequest) 객체에 대해서 먼저 설명하겠습니다.

XHR은 AJAX 요청을 생성하는 자바스크립트 객체입니다.

XHR의 메서드를 사용해서 비동기적으로 브라우저와 서버간의 네트워크 요청을 전송할 수 있습니다.

XML 뿐만 아니라 JSON 등 모든 데이터를 받아오는데 사용할 수 있습니다.

 

AJAX의 주요 두가지 특징은 아래와 같습니다.

1. 페이지 새로고침 없이 서버에 요청

2. 서버로부터 데이터를 받고 작업을 수행

 

먼저 HTTP는 클라이언트가 요청을 하면 웹 브라우저가 요청을 전달해서 서버가 응답하는 구조입니다.

응답받는 데이터는 HTML입니다.

하지만 AJAX를 사용 시 클라이언트가 요청을 하면 XMLHttpRequest 객체를 통해 요청을 하게 됩니다.

서버는 해당 객체를 받고 XML, Text 혹은 JSON을 XMLHttpRequest 객체로 응답하게 됩니다.

 

AJAX 통신 방법

1.XMLHttpRequest 직접 생성하여 통신

function reqListener(e){
	console.log(e.currentTarget.response);
}
var oReq=new XMLHttpRequest();
var serverAddress='https://hello.noma.com/posts';

oReq.addEventListener('load',reqListener);
oReq.open('GET',serverAdress);
oReq.send();

XMLHttpRequest를 이용해서 HTTP Request를 만들어서 간단히 통신하는 방법은 위와 같습니다.

XMLHttpRequest를 직접 생성해서 구현하는 방식은 코드가 길어지고 브라우저 간 호환성도 염두해두어야하기에 JQuery를 이용하여 AJAX 통신을 하는 방법을 보다 많이 사용합니다.

 

2.JQuery를 사용한 통신

var serverAddress='https://hello.noma.com/posts';
$.ajax({
	url:,
    type:'GET',
  	success: function onData(data){
		console.log(data);
	},
    error: function onError(error){
    	console.log(error);
    }
});

이렇게 되면 코드를 훨씬 더 직관적으로 짤 수 있습니다. 

 

하지만 XHR은 잘 디자인 되어있는 API가 아닙니다.

따라서 ES6부터 내장 라이브러리인 fetch API를 제공합니다.

 

3.fetch API를 사용한 통신

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

fetch API는 이전에 학습했던 Promise 기반으로 만들어졌기에 데이터를 다루기 편리한 장점이 있습니다.

 

jQuery.ajax()와 Fetch API의 기본 스펙은 크게 두 가지가 다릅니다.

1. fetch()로 부터 반환되는 Promise 객체는 HTTP error 상태를 reject 하지않습니다.

Status Code가 404나 500을 반환하더라도 ok 상태가 false인 resolve가 반환되며 네트워크 장애나 요청이 완료되지 못한 상태여야 reject가 반환됩니다.

2. 보통 fetch는 쿠키를 보내거나 받지 않습니다. 쿠키를 전송하기 위해서는 자격증명 옵션을 반드시 설정해야합니다.

 

fetch() 메서드에 두번째 파라미터를 적용하는 것도 가능합니다. 아래와 같은 추가 설정이 가능합니다.

postData('http://example.com/answer', {answer: 42})
  .then(data => console.log(JSON.stringify(data))) // JSON-string from `response.json()` call
  .catch(error => console.error(error));

function postData(url = '', data = {}) {
  // Default options are marked with *
    return fetch(url, {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, *same-origin
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, *same-origin, omit
        headers: {
            'Content-Type': 'application/json',
            // 'Content-Type': 'application/x-www-form-urlencoded',
        },
        redirect: 'follow', // manual, *follow, error
        referrer: 'no-referrer', // no-referrer, *client
        body: JSON.stringify(data), // body data type must match "Content-Type" header
    })
    .then(response => response.json()); // parses JSON response into native JavaScript objects
}

 

여기까지 자바스크립트에서의 비동기 프로그래밍에 대해서 알아보았습니다.

 

 

참고

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started

https://velog.io/@wiostz98kr/Ajax%EC%9D%98-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%82%AC%EC%9A%A9%EB%B2%95XHR-jquery-fetch-vs-axios

https://inpa.tistory.com/entry/WEB-%F0%9F%8C%90-%EC%9B%B9-%EC%86%8C%EC%BC%93-Socket-%EC%97%AD%EC%82%AC%EB%B6%80%ED%84%B0-%EC%A0%95%EB%A6%AC