jQuery Deferred.then() 메서드의 활용 예제와 설명

jQuery의 Deferred.then() 메서드는 Deferred 객체가 성공 또는 실패 상태일 때 각각 실행할 콜백 함수를 지정합니다. 성공 시에는 첫 번째 인자로 전달한 콜백이 실행되고, 실패 시에는 두 번째 인자로 전달한 콜백이 실행됩니다. 이를 통해 비동기 작업의 결과에 따라 다양한 처리를 수행할 수 있습니다. 이를 더 자세히 살펴보기 위해 다음과 같은 예제들을 제시해보겠습니다.

예제 1: Ajax 요청 성공 및 실패 처리

var deferred = $.Deferred();

$.ajax({
  url: "https://example.com/api",
  method: "GET",
  success: function(response) {
    deferred.resolve(response);
  },
  error: function(xhr, status, error) {
    deferred.reject("Ajax 요청 실패: " + error);
  }
});

deferred.promise()
  .then(function(response) {
    console.log("Ajax 요청 성공:", response); // Ajax 요청 성공: {data: ...}
  }, function(errorMessage) {
    console.error(errorMessage); // 출력되지 않음
  });

위 코드에서는 Ajax 요청을 보내고, 성공 시에는 resolve()를 호출하여 성공 상태로 변경하고, 실패 시에는 reject()를 호출하여 실패 상태로 변경합니다. 이후 then()을 사용하여 각각 성공 및 실패 시에 대응하는 콜백을 지정합니다.

예제 2: 타임아웃 처리 후 작업 실행

var deferred = $.Deferred();

setTimeout(function() {
  deferred.resolve("타임아웃 후 작업 완료");
}, 3000);

deferred.promise()
  .then(function(message) {
    console.log(message); // 타임아웃 후 작업 완료
  });

위 코드는 setTimeout을 사용하여 3초 후에 resolve()를 호출하여 타임아웃 처리 후에 작업을 실행합니다. 이후 then()을 사용하여 작업 완료 메시지를 출력합니다.

예제 3: 여러 단계의 처리 연결

var deferred = $.Deferred();

function step1() {
  console.log("첫 번째 단계 완료");
  return "결과 1";
}

function step2(result) {
  console.log("두 번째 단계 완료:", result);
  return "최종 결과";
}

deferred.resolve();
deferred.promise()
  .then(step1)
  .then(step2)
  .then(function(finalResult) {
    console.log("최종 결과:", finalResult); // 최종 결과: 최종 결과
  });

위 코드에서는 여러 단계의 처리를 연결하여 실행합니다. 각 단계의 결과는 다음 단계로 전달되어 처리됩니다.

이상으로 jQuery Deferred.then() 메서드의 활용 예제와 설명을 살펴보았습니다.