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

jQuery의 Deferred.rejectWith() 메서드는 Deferred 객체를 실패 상태로 변경하는 데 사용됩니다. 이 메서드는 reject()와 유사하지만, 실패 콜백을 호출할 때 컨텍스트(context)를 지정할 수 있습니다. 이를 통해 실패 콜백에서 특정 컨텍스트 내의 데이터나 함수 등을 활용할 수 있습니다. 이를 더 자세히 살펴보기 위해 다음과 같은 예제들을 제시해보겠습니다.

예제 1: 컨텍스트를 활용한 Ajax 요청 실패 처리

var context = {
  errorMessage: "Ajax 요청 실패"
};

var deferred = $.Deferred();

$.ajax({
  url: "https://example.com/api",
  method: "GET",
  success: function(response) {
    deferred.resolve(response);
  },
  error: function(xhr, status, error) {
    deferred.rejectWith(context, [error]);
  }
});

deferred.promise()
  .then(function(response) {
    console.log("성공:", response); // 성공: {data: ...}
  })
  .fail(function(error) {
    console.error(this.errorMessage + ":", error); // Ajax 요청 실패: ...
  });

위 코드에서는 rejectWith()를 사용하여 실패 콜백을 호출할 때 context 객체를 전달합니다. 이를 통해 실패 콜백 내에서 errorMessage 속성을 사용하여 오류 메시지를 출력합니다.

예제 2: 컨텍스트를 활용한 타임아웃 처리

var context = {
  timeoutMessage: "타임아웃"
};

var deferred = $.Deferred();

setTimeout(function() {
  deferred.rejectWith(context);
}, 3000);

deferred.promise()
  .then(function() {
    console.log("작업 성공"); 
  })
  .fail(function() {
    console.error(this.timeoutMessage); // 타임아웃
  });

위 코드는 rejectWith()를 사용하여 타임아웃 처리 시 context 객체를 전달합니다. 이를 통해 실패 콜백 내에서 timeoutMessage 속성을 사용하여 타임아웃 메시지를 출력합니다.

예제 3: 컨텍스트를 활용한 조건부 실패 처리

var context = {
  errorMessage: "값이 올바르지 않음"
};

function checkValue(value) {
  var deferred = $.Deferred();

  if (value === "올바른 값") {
    deferred.resolve("값이 올바름");
  } else {
    deferred.rejectWith(context);
  }

  return deferred.promise();
}

checkValue("잘못된 값")
  .then(function(message) {
    console.log("성공:", message);
  })
  .fail(function() {
    console.error(this.errorMessage); // 값이 올바르지 않음
  });

위 코드에서는 rejectWith()를 사용하여 실패 시 context 객체를 전달합니다. 이를 통해 실패 콜백 내에서 errorMessage 속성을 사용하여 오류 메시지를 출력합니다.

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