조회 요청한 데이터가 출력될때까지, 대기를 해야 하고,
데이터를 확인후에만 다음 단계로 넘어가야 할때. 주로 사용.
그런데, 위는 여러개 동시 호출방식이고, 단순하게 절차 단계마다 체크가 필요한 경우에는, async await 를 사용하는게 훨씬 더 직관적임.
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();
});
