javascript 비동기 호출 (async, await, Promise) 기본 예제

단순 조회만 하면, 아래 처럼 필요가 없지만,

조회 요청한 데이터가 출력될때까지, 대기를 해야 하고,

데이터를 확인후에만 다음 단계로 넘어가야 할때. 주로 사용.

function checkValid(x) {
    return new Promise(function(resolve) {

        $.ajax({
            type: "POST",
            url: "/api/",
            data: JSON.stringify({ "x": x }),
            contentType: "application/json",
            dataType: "json",
          beforeSend: function () {
            // 필요하면 로딩 표시 시작
            // showLoading();
          },
            success: function (data) {
                resolve(true);    // 성공시
            },

            error: function () {
                resolve(false);    // 실패, 에러
            },
          complete: function () {
            // 필요하면 로딩 숨김
            // hideLoading();
          }
        });

        // 여러개 ajax 항목 동시 실행

    });
}

async function saveOrSubmit() {
    const isValid = await checkValid(x);

    if (!isValid) {
        return;                    // 검증 실패하면 종료
    }

    console.log("모든 검증 완료 → 실제 저장/처리 로직 실행");
    proceedToNextStep();   // 또는 저장 AJAX 호출 등
}

$("#btn").click(function() {
    saveOrSubmit();
});

그런데, 위는 여러개 동시 호출방식이고,  단순하게 절차 단계마다 체크가 필요한 경우에는, async await 를 사용하는게 훨씬 더 직관적임. 

async function check(){}

//호출하는 함수도 async 설정 필요
const isValid = await check(value);

 if (!isValid) {
        alert('유효하지 않습니다.');
        return;   // 중단
    }

form submit 이 bootstrap validator 플러그인에 바인딩되는 경우.

// 1. 초기화만 심플하게 해줍니다.

$("#form1").validator();

// 2. Submit 핸들러 하나로 통합 관리

$("#form1").on("submit", async function (e) {

    

    // 💡 부트스트랩 validator 검증에 실패한 경우

    if (e.isDefaultPrevented()) {

        // [수정] 버튼을 누를 때마다 무조건 Notify가 실행됩니다.

        $.notify(

            { message: "허용된 값이 아닙니다." },

            { type: "warning" }

        );

        return; // 더 이상 진행하지 않고 중단

    }

    // 부트스트랩 검증을 통과한 경우에만 아래 커스텀 로직 진행

    e.preventDefault(); 

    // 체크박스 검증

    if (!$("#usingAgree").is(":checked")) {

        alert("개인정보 수집/이용에 동의해야 합니다.");

        return;

    }

    // 비동기 검증

    if (!(await check(value))) {

        alert("유효하지 않습니다.");

        return; 

    }

    // 모든 검증 완료 -> 실제 서버로 전송

    e.target.submit(); 

});