Notice
Recent Posts
Recent Comments
Link
SeouliteLab
jQuery Deferred.state() 메서드의 활용 예제와 설명 본문
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() 메서드의 활용 예제와 설명을 살펴보았습니다.