Ajax success 결과값 리턴

ajax의 결과(예 : GET)를 다른 곳에서 활용하고 싶을 때

  functionName: function(arr) {

    $.ajax({
      url: "apiurl"+arr,
      type: "GET",
      dataType: "json",
      contentType : "application/json",
      success: function(res){
        return res.data;
      },
      error: function(xhr) {
        switch(xhr.status) {
          case 404 :
            alert(message);
            break;
          case 500 :
            alert(message);
            break;
        }
      }
    });
  }

위와 같이 사용하면 안된다!

success 내에 return을 넣으면 함수 안 ajax 안에 있기때문에 원하는 동작을 하지 않는다.

그렇기에 ajax를 탈출하고나서 리턴을 해주기 위해 변수를 만들어 아래와 같이 사용해야 한다.

  functionName: function(arr) {
    let arr = {};

    $.ajax({
      url: "apiurl"+arr,
      type: "GET",
      dataType: "json",
      contentType : "application/json",
      success: function(res){
        thingInfo = res.data;
      },
      error: function(xhr) {
        switch(xhr.status) {
          case 404 :
            alert(message);
            break;
          case 500 :
            alert(message);
            break;
        }
      }
    });
    return arr;
  }

하지만 이게 끝이 아니다!

ajax 호출이 비동기로 진행되어서 결과값을 받기도 전에 다음 ajax가 호출되어 모처럼 리턴받아온 결과값을 활용하지 못할 수 있다.

그렇기에 아래와 같이 명시적으로 동기로 진행시켜줄 필요가 있다.

  functionName: function(arr) {
    let arr = {};

    $.ajax({
      url: "apiurl"+arr,
      type: "GET",
      async: false,
      dataType: "json",
      contentType : "application/json",
      success: function(res){
        arr = res.data;
      },
      error: function(xhr) {
        switch(xhr.status) {
          case 404 :
            alert(message);
            break;
          case 500 :
            alert(message);
            break;
        }
      }
    });
    return arr;
  }

이전 코드와 다른점은 ajax 옵션에 async: false가 추가되었다는 점이다.