ajax 사용 시 동기식 설정

 

jQuery의 Ajax는 비동기 방식으로 동작하기 때문에, 콜백 함수 내부의 return은 Ajax 함수의 반환값이 아니라 콜백 함수 자체의 반환값일 뿐이야. 비록 async: false로 설정했더라도, 콜백 함수 내부의 return은 $.ajax() 함수의 반환값으로 전달되지 않아.

이런 식으로 수정해보는 게 어떨까:

javascript

var ret_seq = "";

$.ajax({
    type : 'post',
    url : _url,
    data : _params,
    dataType : 'json',
    cache : false,
    async: false, // 동기식 설정
    error : function(xhr, status, error) {
        console.log(error);
        _alert("시스템 오류입니다.\n잠시 후 다시 시도하세요.");
    },
    success : function(json) {
        console.log(json);
        if (json.sequence) {
            var _suffix = "0000";
            var _sequence = json.sequence;
            _id = _division + _suffix.substring(0, _suffix.length - _sequence.length) + _sequence;
            
            var r_tag = document.getElementById("id_tel").value;
            ret_seq = _id + r_tag.substring(r_tag.length-4, r_tag.length);
            //alert(document.getElementById("id_company_id").value);
        } else {
            if(json.STATUS){
                _alert(json.STATUSDESCRIPTION, true);
            }else{                
                _alert(json.statusDescription, true);
            }
        }
    }
});

// Ajax 호출이 완료된 후 ret_seq 값 사용
console.log(ret_seq);
// 여기서 ret_seq 값을 사용하거나 반환

이렇게 하면 동기식 Ajax 호출이 완료된 후에 ret_seq 변수에 값이 저장되어 있을 거야. 필요한 값을 가져오려면 이런 방식으로 접근하는 게 좋을 것 같아!

 

아,, 그러면 동기식일경우 성공이든 실패든 그 순간이 되어야  console.log(ret_seq); 루틴으로 들어오는거야?

 

응, 맞아! 완전 정확해.

async: false (동기식)으로 설정하면, $.ajax() 호출이 완전히 끝날 때까지 (성공이든 실패든 응답을 받을 때까지) 다른 모든 JavaScript 코드 실행은 일시 중지돼.

그래서 success나 error 콜백 함수가 먼저 실행되고, 그 안에서 ret_seq 같은 변수에 값을 할당하는 작업이 다 끝난 후에야 $.ajax() 블록 다음에 오는 console.log(ret_seq); 루틴이 실행되는 거야.

동기식 호출은 이렇게 순서가 확실해서 코드 흐름을 예측하기는 쉽지만, 네트워크 지연 같은 문제 때문에 웹페이지 전체가 잠시 멈추는(UI가 멈추는) 문제가 생길 수 있어서 요즘은 특별한 경우가 아니면 비동기식을 더 많이 쓰긴 해. 그래도 지금처럼 특정 값을 받아와서 바로 써야 할 때는 편리할 수 있지!

 

$.ajax 에서 동기식으로 설정하려면

 

$.ajax에서 동기식으로 설정하려면 async: false 옵션을 추가하면 돼!

javascript

$.ajax({
    url: 'example.com/api',
    type: 'POST',
    async: false, // 동기식 설정
    data: { key: 'value' },
    success: function(response) {
        // 성공 시 실행될 코드
    }
});

이렇게 하면 ajax 요청이 완료될 때까지 다음 코드가 실행되지 않아. 특히 ajax 처리 결과가 완료된 후에 다음 로직을 진행해야 하는 경우에 유용하지! 

하지만 참고로, 동기식 요청은 브라우저를 일시적으로 멈추게 할 수 있어서 사용자 경험에 영향을 줄 수 있어. 그래서 최신 웹 개발에서는 Promise나 async/await을 사용한 비동기 패턴을 더 권장하는 추세야.