[JavaScript] AJAX를 위한 Fetch API

 

웹 프로그래밍을 하다보면 사용자 경험 관점에서 AJAX(Asynchronous Javascript And XML)가 꼭 필요한 경우가 생기게된다. AJAX를 위해 일반적으로 XMLHttpRequest 객체를 많이 사용했었는데 ES6(EcmaScript Ver.6), 2015년 부터 Fetch라는 새로운 API가 사용되기 시작했고 2021년 기준으로 최신 브라우저들은 Fetch API를 모두 지원한다.

 

Fetch API는 XMLHttpRequest 객체와 마찬가지로 요청이 완료되었을 때 해야할 일들을 '요청 완료' 이벤트가 발생했을 때 처리하지만 XMLHttpRequest 객체를 사용했을 때와 달리 프로미스promise를 활용한다.

fetch('AJAX 처리 URL', {
	//	AJAX 설정 및 데이터 설정
} 
).then(
	//	response를 받았을 때 처리 - 일반적으로 body를 반환해준다.
).then(
	//	response body를 받았을 때 처리
).catch(
	//	오류 처리
);

 

Fetch API의 사용 방법의 예를 살펴보자. 아래 예는 서버에 이름, 나이 데이터를 전달하고 해당 사람의 전공(major)을 JSON 형식으로 받는 Fetch 호출이다.

//	서버에 전달할 데이터
var args = JSON.stringify({'name':'Mike', 'age':'62', 'major':''});

fetch('/ajax/request', {
    method: 'POST',
    headers: {
        'Content-type': 'application/json'
    },
    body: args
}).then((response) => {
    return response.json();		// JSON 형식에 맞게 해석하여 반환
}).then((resData) => {
    console.log('resData: ', resData);
    var major = document.getElementById("major");
    major.innerHTML = resData['major'];
}).catch((error) => {
    console.log('[Error] fetch:', error);
});

 

같은 내용을 XMLHttpRequest 객체를 사용해서 기술하면 아래와 같다.

var args = JSON.stringify({'name':'Mike', 'age':'62', 'major':''});

var ajaxRequest = new XMLHttpRequest();
ajaxRequest.open('POST', '/ajax/request');
ajaxRequest.onload = function(){
    var resData = JSON.parse(ajaxRequest.responseText);
    console.log('resData: ', resData);
    var major = document.getElementById("major");
    major.innerHTML = resData['major'];
};
ajaxRequest.setRequestHeader('Content-type', 'application/json');
ajaxRequest.send(args);

 

경험에 근거했을 때 Fetch API를 사용하거나 XMLHttpRequest 객체를 사용하거나 결과에 차이는 없다. 자바스크립트의 프로미스에 익숙한 사람이라면 fetch API가 좀 더 편하게 느껴질 것 같고 XMLHttpRequest 기반으로 AJAX를 구현해 왔던 사람이라면 XMLHttpRequest 객체를 사용하는 것이 익숙하고 편할것이다.

 

참고로 아래는 위 예제의 AJAX 요청을 처리하기 위한 파이썬 플라스크 기반 서버 코드이다. 요청을 받으면 data의 'major' 필드에 'Physics'라는 값을 설정하도록 되어있다.

@main.route("/ajax/request", methods=['POST'])
def respondAjax():
    data = request.json
    data['major'] = 'Physics'
    return data

 

■