ajax 순서대로 여러번 사용하기 (Promise, then)

 

ajax란?

AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말한다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"이다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다.

출저 : MDN Web docs

 

정리하자면 ajax의 가장 큰 특징 두가지는 페이지 새로고침 없이 서버에 요청하고, 서버로부터 데이터를 받고 작업을 수행한다는 것이다. 아마 웹이나 앱개발을 하시는 분들이라면 한번쯤 사용해봤을 기능이다.

 

ajax 기본형

자바스크립트에서 사용하는 ajax 기본은 아래와 같다. 이 경우에는 ajax를 한번 호출하여 값을 가져오게 된다.

$.ajax({
    url: "./ajax1.php",  
    type: "POST",
    success: function(result) {
        succ(result);
        console.log(result); // 성공하면
    },
    fail: function(result) {
        fail(error); 
        console.log(result.responseText); // 실패하면
    }
});

 

 

ajax를 여러번 사용해야한다면?

ajax를 여러번 거쳐 값을 얻어내야하는 경우도 있는데 첫번째 ajax를 처리하고 결과값에 따라 두번째 ajax를 호출해야하는 경우이다. 이 경우에는 Promise를 사용한다. Promise로 첫번째 ajax를 처리하고, 특정 결과 값이 나온다면 then을 통해 두번째 ajax를 처리하게 된다.

 

코드 예시

new Promise( (succ, fail)=>{

        $.ajax({
        url: "./ajax1.php",  
        type: "POST",
        success: function(result) {
            succ(result);
            console.log(result); // 성공하면
        },
        fail: function(result) {
            fail(error); 
            console.log(result.responseText); // 실패하면
        }
    });

}).then((arg) =>{    // 두번째 ajax를 실행한다.

        $.ajax({
            url: './ajax2.php',
            type: 'post',
            success: function(result2) {
                succ(result2);
                console.log(result2); // 성공하면
            },
            fail: function(result2) {
                fail(error); 
                console.log(result.responseText); // 실패하면
            }                                             

        });

});

 

 

적용예시

내가 작업 했던 코드는 첫번째 ajax에서 사업자번호를 국세청 API와 통신하여 유효한 사업자인지 판별한 뒤, 두번째 ajax에서 기존 홈페이지에 가입한 회원의 사업자번호와 중복되는 것인지 체크를 하는 작업을 Promise와 then으로 구현하였다. 한 서버에 있지 않는 데이터를 조건에 맞게 판별하려면 이 promise, then 기능을 많이 사용할 것 같다.

check = {}

new Promise( (succ, fail)=>{

    $.ajax({
    url: "./ajax1.php",  
    type: "POST",
    data: { bs_num: bs_num },
    success: function(result) {
        check.code = result.b_stt_cd;
        check.b_no = result.b_no;
        succ(result);
        //console.log(result);

    },
    fail: function(result) {
        console.log(result.responseText);
        fail(error); 
    }
});

}).then((arg) =>{  

    $.ajax({
        url: './ajax2.php',
        type: 'post',
        data: { bs_num: bs_num },
        success: function(result2) {

            if(result2 > 0) {
                alert("이미 가입하였습니다.");
            } else {
                if(check.code == "01") {
                    $("#result").val(check.b_no);
                } else {
                    $("#result").val(check.b_no);
                }  
            }  
            
           //console.log(result2);


       }                                               

    });

});