[jquery/제이쿼리] ajax() async, complete, beforeSend 설정

제이쿼리 ajax는 많이 사용하는데 항상 헷갈리는 조건이 있다.

바로 async... 동기/비동기에 관한 설정인데.. 머리가 나빠서인지 자꾸 잊어버린다..

 

async (default: true)

Type: Boolean

-> 기본이 비동기(true)처리이고 동기(false)처리를 하려면 변경이 필요하다.

 

- 비동기:  로직의 실행이 끝날때까지 기다려주지 않고 나머지 코드를 먼저 실행하는것을 말한다.
즉, 순서에 상관없이 실행된다.

- 동기: 처리가 된 이후에 다음 로직이 실행된다. 즉, 실행 순서가 있다.

$.ajax({
	type: "POST",
	url: '/rest/name/select',
	dataType: "json",
	data: {userId:10},
	async: false, //동기처리 (기본이 true)
	success: function (json) {
		//처리 후 로직
		....
	},
	error: function (xhr, ajaxOptions, thrownError) {
		//실패 후 로직
		....
	},
	beforeSend: function( xhr ) {
		//ajax가 서버에 요청하기 전에 실행하는 로직
		....
	},
	complete: function () {
		//성공, 실패와 상관없이 실행하고 싶은 로직
		....
	},
});

complete

Type: Function( jqXHR jqXHR, String textStatus )

-> success, error에 관계없이 실행하고 싶은 로직을 넣는다. finally와 같은 기능을 수행한다.

 

beforeSend

Type: Function( jqXHR jqXHR, PlainObject settings )

-> ajax가 서버로 요청하기 전에 실행되는 로직을 실행할 수 있다.

 

 

개인적으로 프로젝트에서 ajax에 beforeSend와 complete를 로딩바 실행과 종료로 사용하고 있다.

beforeSend에서 로딩바를 실행시킨 후

complete에서 로딩바를 제거한다.

 

 

 

참고 자료: https://api.jquery.com/jquery.ajax/

jQuery.ajax() | jQuery API Documentation