[JavaScript] Ajax 동기식 처리 하는 법

ajax는 기본적으로 비동기식으로 지원합니다.

하지만 때때로는 동기식으로 처리해야할 상황이 생기곤 합니다.

 

아래의 예시를 봅시다.

function test(){
	$.ajax({
    	data: {name: 'MinSoo'},
        url: 'nameCheck',
        dataType: 'json',
        success: function(data){
        	 var result = data;
                 return result;
                 }
        });
}

위의 코드와 같이 function 안에서 또 function을 콜하는 상황이 자주 발생합니다.

결과 값을 확인해보면 undefined 가 나올 것입니다.

 

이러한 이유는 비동기 방식에서 success 콜백 함수에서 리턴한 값을 받을 수 없다는 말입니다.

ajax 호출로 서버로 부터 응답을 받는 것이 다음 로직을 실행하기 전에 받을 수 있다고 확신할 수 없는 것입니다.

 

아래와 같이 비동기식으로 라인 1줄만 추가해주면 정상적으로 작동하게 됩니다.

function test(){
	$.ajax({
    	data: {name: 'MinSoo'},
        url: 'nameCheck',
        dataType: 'json',
        async: false,
        success: function(data){
        	 var result = data;
                 return result;
                 }
        });
}

async : false 한 줄만 추가해주면 정상적으로 작동하시는 것을 확인 할 수 있습니다.

 

서버의 응답을 모두 기다렸다가 다음 로직을 처리해야하는 함수를 짠다면 동기식 처리 방법을 알아둘 필요가 있습니다.