SeouliteLab

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

카테고리 없음

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

Seoulite Lab 2024. 4. 1. 08:30

jQuery의 Deferred.state() 메서드는 Deferred 객체의 현재 상태를 반환합니다. Deferred 객체는 세 가지 상태를 가질 수 있습니다: "pending" (대기 중), "resolved" (성공), "rejected" (실패). 이 메서드를 사용하면 현재 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);
  }
});

setTimeout(function() {
  console.log("현재 상태:", deferred.state()); // 현재 상태: pending
}, 1000); // Ajax 요청 완료 전에 상태 확인

deferred.promise()
  .then(function(response) {
    console.log("성공:", response); // 성공: {data: ...}
    console.log("최종 상태:", deferred.state()); // 최종 상태: resolved
  })
  .fail(function(errorMessage) {
    console.error(errorMessage); // 출력되지 않음
  });

위 코드에서는 Ajax 요청을 보낸 후 상태를 확인합니다. setTimeout을 사용하여 Ajax 요청이 완료되기 전에 상태를 확인하고, then() 콜백 내에서 다시 한 번 상태를 확인합니다.

예제 2: 타임아웃 처리 상태 확인

var deferred = $.Deferred();

setTimeout(function() {
  deferred.resolve("작업 완료");
}, 3000);

console.log("처음 상태:", deferred.state()); // 처음 상태: pending

deferred.promise()
  .then(function(message) {
    console.log(message); // 작업 완료
    console.log("최종 상태:", deferred.state()); // 최종 상태: resolved
  });

위 코드는 setTimeout을 사용하여 타임아웃 처리 후 상태를 확인합니다. 타임아웃이 완료되기 전에 상태를 확인하고, then() 콜백 내에서 다시 한 번 상태를 확인합니다.

예제 3: 조건부 처리 후 상태 확인

var deferred = $.Deferred();

if (Math.random() > 0.5) {
  deferred.resolve("조건 충족");
} else {
  deferred.reject("조건 불충족");
}

console.log("처음 상태:", deferred.state()); // 처음 상태: pending

deferred.promise()
  .then(function(message) {
    console.log(message); // 조건 충족
    console.log("최종 상태:", deferred.state()); // 최종 상태: resolved
  })
  .fail(function(errorMessage) {
    console.error(errorMessage); // 출력되지 않음
  });

위 코드에서는 조건부 처리 후 상태를 확인합니다. 무작위로 resolve 또는 reject를 호출하여 상태를 확인하고, then() 또는 fail() 콜백 내에서 다시 한 번 상태를 확인합니다.

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