[Javascript] ajax 라이브러리 사용 방법 (jQuery, axios)

ajax를 사용할 수 있는 jQuery, axios 라이브러리에서 성공, 실패, 항상 이 3단계를 어떻게 나타내는지 설명하겠습니다.

 

jQuery

 

jQuery의 ajax 사용 방식은 1.5 이전, 1.5 이후로 나뉩니다.

 

1.5 이전

 

1.5 이전엔 success, fail, complete 옵션을 이용한 callback 방식을 사용했습니다. 

 

$.ajax({
	url : '/member/1',
	type : 'get',
	data : data,
	success : function(data) {
		// 성공
	},
	error : function(error) {
		// 에러
	},
	complete : function() {
		// 항상
	}
});

 

1.5 이후

 

1.5 이후엔 promise 기반으로 변경됐습니다.

 

done (성공), fail (에러), always (항상) - 1.6에 등장, then (성공, 에러) - 1.8에 등장

 

$.ajax({
	url: "/api/test",
	type: 'get'
})
.done(function(resp) {
	// 성공
})
.fail(function() {
	// 실패
})
.always(function() {
	// 항상
}); 

 

then([done1(), ... , doneN()], [fail1(), ... , failN()]) 은 첫번째 파라미터에 성공했을 때 실행되는 function 을 배열로 두번째엔 실패했을 때 실행되는 function을 배열로 받습니다.

 

then은 여러 개의 done과 fail을 쉽게 선언하기 위해서 만들어진 것 같습니다.

 

$.ajax({
	url: "/api/test",
	type: 'get'
})
.then([done1(), ... , doneN()], [fail1(), ... , failN()])
.always(function() {
	// 항상
}); 

 

axios

 

axios는 promise 기반의 ajax 라이브러리로 심플하게 사용할 수 있습니다.

 

then (성공), catch (실패), then (항상) 으로 사용할 수 있습니다.

 

axios 는 좀 특이하게 always나 complete 처럼 항상 실행되게 하려면 then -> catch -> then (항상) 과 같이 마지막 then을 선언해주면 됩니다.

 

axios.get('http://localhost:8080')
.then(res => {
	// 성공
})
.catch(error => {
	// 에러
})
.then(() => {
	// 항상
})

 

 

읽어 주셔서 감사합니다.