jQuery 여러 Ajax 요청 완료 후 실행하기: $.when.apply + done/fail 예제

이 글은 jQuery에서 $.when.apply($, reqs).done()을 처음 써보는 분이 바로 따라 할 수 있게 정리한 내용이다.
반복문에서 $.ajax를 여러 번 호출하다 보면, “저장되었습니다” 같은 안내를 언제 띄워야 할지 헷갈릴 때가 많다.
여기서는 요청을 reqs 배열에 모아두고, 모든 요청이 끝난 뒤에만 완료 팝업을 띄우는 방식(done/fail)으로 처리한다.

---

목표

• $.ajax 저장 요청을 여러 번 보내더라도 전부 성공했을 때만 “저장되었습니다”를 띄운다
• 중간에 하나라도 실패하면 공통 에러 처리(ajaxFail) 로 넘긴다

---

1) 설치 / 로드

<!-- jQuery CDN 예시 (이미 프로젝트에 포함되어 있으면 생략) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

2) 기본 예제

핵심은 reqs 배열에 ajax 요청(Deferred)을 담아두고, $.when.apply로 “전체 완료”를 기다린 다음 done/fail에서 후처리를 하는 것이다.

// ajax 요청들을 모아둘 배열
var reqs = [];

// 예시 데이터(여러 줄 저장 가정)
for (var i = 0; i < row_list.length; i++) {
  var data = setInsertData(i);

  reqs.push(
    $.ajax({
      type: "POST",
      url: "/json.cmx",
      dataType: "json",
      data: data
    })
  );
}

// reqs 안의 모든 요청이 끝날 때까지 기다린다
// apply를 쓰면 배열을 $.when(ajax1, ajax2, ...) 형태로 "펼쳐서" 넣는 효과
$.when.apply($, reqs)
  .done(function () {
    // 전부 성공했을 때만 실행
    alert("저장되었습니다.);
  }).fail(function (xhr, textStatus, errorThrown) {
    // 하나라도 실패하면 실행
    ajaxFail(xhr, textStatus, errorThrown);
  });

 

왜 apply를 쓰나?
$.when()은 원래 $.when(a, b, c)처럼 “여러 인자”를 받는다. 그런데 반복문으로 만든 요청이 배열(reqs)에 들어있기 때문에 $.when.apply($, reqs)로 배열을 인자처럼 펼쳐 넣는다.

3) 옵션 / 커스터마이징

• 요청이 0개일 때 처리: row_list가 비면 done이 바로 실행되는 걸 기대하는지, “저장할 데이터 없음”을 띄울지 결정
• 저장 실패한 행(i) 추적: reqs.push할 때 i를 함께 기록해서 어떤 행이 실패했는지 로그로 남기기

// 실패한 행을 추적하고 싶을 때
var reqs = [];
var meta = []; // i를 같이 보관

for (var i = 0; i < row_list.length; i++) {
  meta.push(i);
  reqs.push($.ajax({ type:"POST", url:"/json.cmx", dataType:"json", data:setInsertData(i) }));
}

$.when.apply($, reqs)
  .done(function () {
    alert("저장되었습니다.");
  }).fail(function (xhr, textStatus, errorThrown) {
    // 어떤 요청이 실패했는지까지 완벽히 찍으려면,
    // 서버 응답(xhr.responseText) + 요청 데이터에 식별자를 넣는 방식이 좋다.
    ajaxFail(xhr, textStatus, errorThrown);
  });

---

정리

• reqs에 $.ajax() 반환값을 모은다
• $.when.apply($, reqs)로 “전체 완료”를 기다린다
• done은 “전부 성공”, fail은 “하나라도 실패”일 때 실행된다