[JavaScript] ajax ayunc 동기식 설정하여 데이터 받아오기

ajax는 비동기식으로 데이터를 처리하여 정적 웹환경을 동적으로 만들어준 이쁜 기능이다.

ajax를 통해 받아온 data를 가지고 success 구문 내부에서 데이터 처리를 할 경우는 문제가 없지만,

ajax를 통해 받아온 data를 ajax 구문 밖으로 꺼내서 활용하고자 할 경우 문제가 발생한다.

ajax에서 동기, 비동기 설정을 async로 해주며 기본 값이 "true"이다.

따라서 async: false로 해주면 동기식으로 변경된다.

 

아래와 같이 ajax를 통해 넘겨받은 data가 있으면 변수에 "Y" 담아 return하는 함수이다.(기본 "N" return)

function isFunction() {
  var flag = "N";
  $.ajax({
    data: {data: "data"},
    url: "url",
    dataType: "json",
    success: function(data) {
        if(!$.isEmptyObject(data)){
            flag = "Y";
        }
     }
  });
  return flag;
}

 

결과적으로는 ajax가 data를 받아오기 전에 return flag를 해버리는 바람에 data 상관없이 "N"만 return되는 현상을 확인하여 아래와 같이 async: false를 추가하였다.

function isFunction() {
  var flag = "N";
  $.ajax({
    data: {data: "data"},
    url: "url",
    async: false, //동기식 추가
    dataType: "json",
    success: function(data) {
        if(!$.isEmptyObject(data)){
            flag = "Y";
        }
     }
  });
  return flag;
}

이 경우 ajax 구문이 끝나고 나서 다음줄인 return flag를 실행하시 때문에 원하는 값을 return 받을 수 있다.

success문 내부에 return을 하는 방식이 되지 않아 ajax문 밖에서 데이터를 받아 return을 하는 방식을 선택하였고 그 과정에서 비동기식 데이터를 못받는 문제를 발견하여 해당 부분을 적어보았다.

 

기본적으로 ajax는 비동기식으로 데이터를 받아오는 기능이기 때문에 ajax구문의 진행과 상관없이 다음 줄의 스크립트를 실행한다. 따라서 위 처럼 꼭 ajax 구분이 끝난 뒤 다음줄이 시행되어야 한다면 동기식으로 바꿔주어야한다.