[바미] JS ajax에서 success한 result값 return하기

728x90

$(document).ready(function() {
    // 검색결과 값 가져오기.
    let data_result = search_data();
})

function search_data() {
            var success_data = "";
            $.ajax({
                url : 'any URL', // 통신하려는 URL
                type : "POST",
                async: false, 
                data : {
                    param1 : param1, // url과 함께 보내줄 값 적어주시면 됩니다.
                    param2 : param2,
                },
                success : function(result) {
                    if (result) {
                        // data 전달
                        success_data = result;
                    } else {
                    	console.log("Not Result");
                    }
                },
                error : function(request,status,error) {
                    console.log(request+"\n",status,"\n",error, "\n")
                }
            });
            return success_data;
        }

위와 같이 해주시면 됩니다.

사용하실 때 염두해두셔야 할 점은 async: false 라는 옵션 부분 입니다. 이 옵션에 따라 실행하는 순서가 달라지는데

(async=false)
함수 실행 -> 변수 선언 -> ajax 요청 -> return(undefined) -> ajax 응답
(async=true)
함수 실행 -> 변수 선언 -> ajax 요청 -> ajax 응답 -> return ( 결과값 )

async가 true인 상태에서 값이 undefined가 뜨게 되는데 이는 success func를 실행하는 시점이 불확실한 게 원인입니다. 

 

async true 상태에서 success_data에 값 넣기 전에 return 문이 실행되면 첫 줄에 선언한 undefined 상태가 그대로 넘어가는 경우도 있고, undefined 상태가 그대로 넘어가게 될 때 success 실행 시점이 항상 늦는 것처럼 보이지만 네트워크 지연 시간이 코드 처리 시간보다 늦어서 그런 문제가 발생하기도 하죠.
그렇다고 async: false를 쓰면 또 문제인점이 자바스크립트 엔진(+브라우저)이 모든 실행을 멈추고 대기하는 현상이 생깁니다.
즉, ajax가 result를 줄 때까지 브라우저가 정한 실행시간 내 까지는 대기한다는 문제가 있어 이것에 대한 예외처리를 해주셔야 합니다.

 

(그래서 async/await형태나 promise형태로 쓰시는 걸 추천드립니다.)