[jQuery] ajax async 설정

ajax를 사용해야하는 부분이 있어서 평소와 같이 ajax 호출을 하여

반환값로 다음 로직을 진행하는 방식 구현하는 와중에

내가 원하는 값이 반환되지 않는 것을 확인하였다.

 

작성중이던 소스는 간략하게 아래와 같다.

function a(){
    $.ajax({
        url : '/ajax/result',
        dataType : 'json',
        data : jsonData,
        method : 'POST',
        succecss : function(data){
            retrun data.value;
        },
        error : function(e){
            alert(e);
            return;
        }
    })
}
 
function b(code){
    ...
    ...
}
 
function all(){
    var code = a();
    b(code);
}

함수 all을 실행하면

함수 a에서 ajax요청을 하여 반환한 값을

함수 b의 매개변수로 사용하여 진행을 하는 로직이었다.

 

하지만 원하는 결과가 나오지 않아 개발자 모드로 디버깅을 수행하였다.

그 결과 스크립트가 작동되는 순서에서 오류 원인을 확인 할 수 있었다.

 

원인은 함수 all 실행시

함수 a의 ajax 요청을 통해 반환값을 가져오는 동안에 완전히 값을 반환받지 못하였지만

함수 b가 진행이되어 결국 함수 b 는 undefined 라는 매개변수를 이용하여 진행이 되어 오류가 발생한 것이다.

 

오류해결을 위해 ajax의 설정 항목을 확인하던 중

async 값을 설정하면 해결이 가능하다는 것을 확인하였다.

async 설정은 true/false 값을 설정 가능하며

true인 경우 비동기적으로 요청이 되어 위에서 발생한 상황처럼 요청이 끝나기 전에 다음 작업이 활성화되는 경우가 생길 수 있다.

false인 경우 동기적으로 요청을 하여 해당 요청이 끝나기 전까지 다른 작업을 비활성화 할 수 있다.

별다른 설정이 없다면 기본값은 true 값 이다.

 

아래 소스로 async 설정을 추가하여 정상적으로 로직이 진행된 것을 확인하였다.

function a(){
    $.ajax({
        url : '/ajax/result',
        dataType : 'json',
        data : jsonData,
        method : 'POST',
        async : false, //설정 추가
        succecss : function(data){
            retrun data.value;
        },
        error : function(e){
            alert(e);
            return;
        }
    })
}
 
function b(code){
    ...
    ...
}
 
function all(){
    var code = a();
    b(code);
}

참고한 ajax 관련 API URL - https://api.jquery.com/jQuery.ajax/