[ JavaScipt / JQuery / 비동기통신 ] 비동기 통신 제이쿼리 ajax에서 fetch로 수정해보기 (ajax, fetch, axios)

학원 팀프로젝트에서 제이쿼리를 사용하다 보니 서버와 비동기 통신을 해야 할 때 ajax로만 데이터를 주고 받았다.
하지만 최근에는ajax 대신 fetch와 axios를 많이 쓴다고 한다.

- fetch와 axios는 더 간결하고 직관적이다.
- Promise 객체로 리턴해주기 때문에 데이터를 다루기 쉽다.
- 자바스크립트의 async/await 구문과 잘 작동하여 코드를 더욱 읽기 쉽고 관리하기 쉽게 만든다.

 

[ fetch와 axios의 차이점 ]

[ fetch ]
자바스크립트의 기본 api이기 때문에 별도의 설치가 필요없다.
오래된 브라우저에서는 지원하지 않을 수 있다. (현재는 거의 지원한다고 한다.)
json 데이터를 자바스크립트 객체로 변환하는 과정이 필요하다. (response.json())
오류 발생 시 HTTP 응답 코드를 직접 확인해야 한다.
요청 취소를 하려면 별도로 취소해야 한다. (AbortController)
타입 아웃을 설정하기 위해서 자체적으로 구현하거나 다른 라이브러리를 사용해야 한다.

[ axios ] 
별도의 설치가 필요하다.
브라우저 호환성이 뛰어나다.
json 데이터를 자동으로 자바스크립트 객체로 변환해준다.
오류 발생 시 HTTP 응답 코드를 기반으로 예외 처리를 간편하게 할 수 있다. (reject 상태의 promise 객체를 반환 함)
요청과 응답을 중간에 가로채거나 변형하는 인터셉터와 요청 취소가 가능하다. (헤더 수정, 로깅, 오류 처리 등의 중간 작업 가능)
타임 아웃 기능이 내장되어 있다. (response timeout)
브라우저 뿐 아니라 Node.js 환경에서도 작동하기 때문에 코드의 일관성을 유지할 수 있다.
GET, POST, PUT, DELETE 같은 다양한 HTTP Method를 쉽게 지원한다.

 

[ 기존 ajax 사용 코드 ]

// 제이쿼리를 사용한 ajax 비동기 통신

$.ajax({
    // 응답을 요청할 url
    url : `/admin/point/pointStandardManage/tab${tableId}/write`,
    // HTTP Method (GET, POST, DELETE, PUT) method 대신 type도 가능
    method : 'POST',
    // 요청할 때 보내줄 데이터
    // JSON.stringify() : 자바스크립트 객체 -> json 문자열
    // JSON.parse() : json 문자열 -> 자바스크립트 객체
    data : $('#insertForm').serialize(),
    // 응답을 받아올 데이터의 타입 - dataType : 'json' 또는 'text' 또는 'html'등...
    // 클라이언트가 서버에 보내는 데이터의 타입- contentType : 'application/json' 등..
    // contentType을 따로 설정하지 않으면 기본은 application/x-www-form-urlencoded
    // application/x-www-form-urlencoded : 데이터는 키와 값 쌍으로 인코딩, HTML 폼 데이터를 제출
})
// ajax 요청이 성공적으로 응답 받았을 때 진행한다. (.done)
.done(function(response){
    alert(response);
    if (response === "등록이 완료되었습니다.") {
        window.location.href = "/admin/point/pointStandardManage";
    } 
})
// 요청이 실패했을 때 진행한다. (.fial)
.fail(function( jqXHR, textStatus ) {
    alert( "Request failed: " + textStatus );
});

 

[ 수정 후 fetch 사용 코드 ]

// 미리 form 안의 데이터를 변수에 넣어준다.
const writeSubmitFormData = $('#insertForm').serialize();

// 응답을 요청할 url
fetch(`/admin/point/pointStandardManage/tab${tableId}/write`, {
	// HTTP Method
	method: 'POST',
    headers: {
    	// ajax와 다르게 기본 값이 없기 때문에 설정해준다.
        // 파싱을 위해 서버에 클라이언트가 보내는 데이터 타입에 대해 알려준다.
    	'Content-Type': 'application/x-www-form-urlencoded'
	},
    // 요청할 때 보내는 데이터
	body: writeSubmitFormData
})
// 만약 리턴받은 데이터를 json으로 파싱한다면 response.json() 사용
// 나는 String으로 등록 성공 여부 메세지를 리턴 받았기 때문에 굳이 json 필요없음
.then(response => response.text())
.then(data => {
    alert(data);
	if (data === "등록이 완료되었습니다.") {
		window.location.href = "/admin/point/pointStandardManage";
	} 
})
.catch(error => {
      console.error('Error:', error);
});